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内 容 简 介 


本 书 是 《Web 开发 技术 实用 教程 )(ISBN 978-7-302-17435-6) 的 配套 实验 指导 教材 。 本 书 分 成 14 章 ， 
内 容 安排 合理 ,实用 性 强 。 涵 盖 了 当前 Web 开发 技术 的 主要 内 容 , 具 体 涉及 常见 的 开发 工具 Dreamweaver 
CS 3. 0 和 SharePoint Designer 2007, HTML 技术 基础 .XHTML 技术 .CSS 技术、 客户 端 脚本 语言 JSP JF 
发 的 Java 语言 基础 JSP 的 开发 体系 和 环境 配置 .JSP 的 主要 内 置 对 象 .JSP 的 其 他 内 置 对 象 .JSP 的 文件 
操作 ISP 的 JavaBean 编程 .JSP 的 Servlet 编程 JSP 访问 Web 数据 库 、 XML 技术 以 及 Web 的 综合 应 用 。 
并 介绍 了 开发 无 线 WAP 2.0 的 标记 语言 和 脚本 语言 ,利用 它们 开发 无 线 Web 应 用 。 

此 外 ,对 Web 开发 中 常见 的 Java API, 如 DOM4J、JDOM jspSmartUpload 组 件 .JavaMail API 等 都 有 
所 涉及 ,使 读者 开发 Web 的 高 级 应 用 成 为 可 能 。 另 外 ,在 每 一 章 都 提供 了 各 种 形式 具有 现实 意义 的 实验 
练习 ,帮助 读者 了 解 和 掌握 Web 相关 技术 ,为 进一步 开发 Web 应 用 提供 保证 。 

本 书 可 以 作为 高 等 学 校 计算 机 及 相关 专业 学 生 的 Web 程序 设计 、Web 技术 、 网 页 设计 、JSP 技术 课程 
教材 ,也 可 供 技 术 人 员 使 用 。 
本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 
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出 版 说 明 


我 国 高 等 学 校 计算 机 教育 近年 来 迅猛 发 展 ,应 用 所 学 计算 机 知识 解决 实际 问题 ,已 经 成 
为 当代 大 学 生 的 必 备 能 力 。 

时 代 的 进步 与 社会 的 发 展 对 高 等 学 校 计算 机 教育 的 质量 提出 了 更 高 .更 新 的 要 求 。 现 
在 ,很 多 高 等 学 校 都 在 积极 探索 符合 自身 特点 的 教学 模式 ,涌现 出 一 大 批 非常 优秀 的 精品 
课程 。 

为 了 适应 社会 的 需求 ,满足 计算 机 教育 的 发 展 需 要 ,清华 大 学 出 版 社 在 进行 了 大 量 调查 
研究 的 基础 上 ,组 织 编写 了 《高 等 学 校 计算 机 专业 教材 精 选 )。 本 套 教材 从 全 国 各 高 校 的 优 
秀 计算 机 教材 中 精 挑 细 选 了 一 批 很 有 代表 性 且 特 色 鲜 明 的 计算 机 精品 教材 ,把 作者 们 对 各 
自 所 授 计 算 机 课程 的 独特 理解 和 先进 经 验 推荐 给 全 国 师 生 。 

本 系列 教材 特点 如 下 。 

CD 编写 目的 明确 。 本 套 教材 主要 面向 广大 高 校 的 计算 机 专业 学 生 , 使 学 生 通过 本 套 
教材 ,学 习 计 算 机 科学 与 技术 方面 的 基本 理论 和 基本 知识 ,接受 应 用 计算 机 解决 实际 问题 的 
基本 训练 。 

(2) 注重 编写 理念 。 本 套 教材 作者 群 为 各 校 相应 课程 的 主讲 ,有 一 定 经 验 积累 , 且 编 写 
思路 清晰 ,有 独特 的 教学 思路 和 指导 思想 ,其 教学 经 验 具 有 推广 价值 。 本 套 教材 中 不 乏 各 类 
精品 课 配 套 教材 ,并 力图 努力 把 不 同学 校 的 教学 特点 反映 到 每 本 教材 中 。 

(3) 理论 知识 与 实践 相 结 合 。 本 套 教材 贯彻 从 实践 中 来 到 实践 中 去 的 原则 , 书 中 的 许 
多 必须 掌握 的 理论 都 将 结合 实例 来 讲 , 同 时 注重 培养 学 生 分 析 、 解 决 问题 的 能 力 , 满 足 社会 
用 人 要 求 。 

(4) 易 教 易 用 ,合理 适当 。 本 套 教材 编写 时 注意 结合 教学 实际 的 课时 数 , 把 握 教材 的 篇 
幅 。 同 时 ,对 一 些 知识 点 按 教育 部 教学 指导 委员 会 的 最 新 精神 进行 合理 取舍 与 难 易 控制 。 

(5) 注重 教材 的 立体 化 配套 。 大 多 数 教 材 都 将 配套 教师 用 课件 .习题 及 其 解答 ,学 生 上 
机 实验 指导 、 教 学 网 站 等 辅助 教学 资源 ,方便 教学 。 

随 着 本 套 教材 陆续 出 版 ,相信 能 够 得 到 广大 读者 的 认可 和 支持 ,为 我 国 计 算 机 教材 建设 
及 计算 机 教学 水 平 的 提高 ,为 计算 机 教育 事业 的 发 展 做 出 应 有 的 贡献 。 
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伴随 着 Internet 应 用 领域 的 不 断 扩展 和 Web TER 928 Ai ut." Web 开发 技术 ”以 及 相 
关 课 程 已 经 得 到 许多 学 校 的 关注 。 为 了 适应 计算 机 教学 发 展 趋势 以 及 主流 Web 技术 发 展 
现 况 , 有 必要 编写 一 本 符合 当前 Web 技术 发 展 趋势 和 教学 现状 的 实验 教材 ,帮助 广大 学 生 
了 解 和 掌握 Web 的 主流 技术 。 

本 书 是 清华 大 学 出 版 社 出 版 《Web 开发 技术 实用 教程 )(ISBN 978-7-302-17435-6) 的 配 
套 实验 教材 ,是 作者 总 结 多 年 Web 项 目 开发 以 及 Web 教学 实践 的 经 验 ,结合 相关 的 技术 资 
料 编写 而 成 。 本 书 从 程序 设计 角度 出 发 ,紧密 结合 Web 开发 技术 的 特点 和 高 校 Web 开发 
课程 的 教学 大 纲 , 力 求 覆盖 当前 主流 Web 开发 中 使 用 的 常用 技术 ,涉及 了 当前 Web 应 用 中 
常见 的 客户 端 、 服 务 器 端 技 术 ,侧重 介绍 了 服务 器 端 编程 常用 JSP 技术 的 基本 内 容 。 此 外 ， 
本 书 还 引入 了 WAP 2.0 编程 ,引导 读者 进入 无 线 Web 开发 领域 ,有 效 填补 当前 同类 教材 在 
无 线 应 用 领域 的 空白 。 

本 书 分 成 14 章 ,涵盖 了 当前 Web 开发 技术 中 的 Web 技术 基础 、Web 客户 端 开发 技术 
和 服务 器 端 开 发 技术 3 部 分 部 分 内 容 , 具 体 如 下 。 


第 1 部 分 Web 技术 基础 

第 1 章 , 了 解 Web 开发 技术 基础 ,具体 设计 了 Web 的 基本 概念 ,发 展 状况 、 工 作 原理 、 
工作 模式 以 及 关键 技术 ,介绍 常见 的 开发 工具 Dreamweaver CS 3. 0 和 Microsoft Office 
SharePoint Designer 2007. 


第 2 部 分 Web 客户 端 开 发 技术 

第 2 章 HTML 和 XHTMIL。 从 脚本 语言 发 展 的 角度 出 发 ,依次 介绍 了 HTML 的 基本 
概念 以 及 常见 的 基本 标签 .XHTML 主要 内 容 以 及 设计 网 站 的 基本 建设 要 素 。 并 设计 了 表 
格 .表单 .框架 结构 等 多 种 XHTML 元 素 的 具体 的 应 用 练习 ,充分 展示 了 XHTML 的 优势 。 

第 3 章 CSS 技术 。 介 绍 了 CSS 基本 语法 以 及 常见 的 基本 属性 。 使 读者 了 解 如 何 用 
CSS 创建 生动 的 网 页 外 观 。 并 设计 了 CSS 选择 符 、CSS 结合 DIV 设计 菜单 以 及 用 CSS 布 
局 的 相关 实验 练习 ,让 读者 对 CSS 十 DIV 实现 网 页 设计 有 一 个 初步 的 印象 。 

第 4 章 客户 端 脚本 语言 。 主 要 介绍 JavaScript 脚本 语言 ,具体 涉及 的 内 容 有 JavaScript 
脚本 语言 的 基本 语法 、JavaScript 的 控制 流程 JavaScript 的 函数 JavaScript 的 事件 处 理 、 
JavaScript 的 内 置 对 象 。 通 过 对 它们 的 介绍 ,理解 CSS 十 DIV 十 JavaScript 开发 DHTML, 
并 为 进一步 学 习 AJax 打下 坚实 的 基础 。 

第 5 章 可 扩展 标记 语言 XML。 主 要 介绍 并 设计 了 XML 在 客户 端的 应 用 实验 ,具体 包 
括 XML 基础 .XML 的 验证 机 制 DTD 和 XML Schema, XML 的 CSS 显示 以 及 XPATH 基 
础 和 XSLT 转换 XML。 为 读者 后 续 学 习 XML 在 服务 器 端 开 发 打下 基础 。 

第 6 章 WAP 2.0 编程 。 介 绍 WAP 2.0 无 线 应 用 协议 ,具体 涉及 的 内 容 有 WML 1. 3、 
WML 2.0,XHTML Basic, XHTML Mobile Profile, WMLScript 等 。 通 过 它们 引导 读者 了 
解 各 无 线 移动 受 限 设备 终端 的 WAP 网 页 设计 ,无线 终端 的 移动 Web 应 用 的 开发 。 

Je 


第 3 部 分 Web 服务 器 端 开发 技术 

比较 了 常见 的 服务 器 端的 常见 开发 语言 ,并 侧重 介绍 了 服务 器 端 常用 的 编程 语言 JSP。 

第 7 章 JSP 开发 的 Java 语言 基础 。 这 使 没有 任何 编程 经 验 的 读者 可 以 迅速 进入 学 习 
状态 而 特别 编写 的 。 具 有 Java 编程 经 验 的 读者 可 以 跳 过 这 一 章 。 这 一 章 主要 设计 了 异常 
处 理 和 多 线程 处 理 的 实验 。 

第 8 章 JSP 简介 。 介 绍 了 JSP 的 工作 原理 和 JSP 基本 语法 。 引 导读 者 学 习 安 装 并 配 
ft Tomcat 服务 器 ,进入 学 习 开 发 JSP 应 用 ,并 让 读者 了 解 开 发 购物 车 的 基本 原理 。 

第 9 章 JSP 的 内 置 对 象 。 介 绍 了 JSP 的 out, request, response, application, session, 
page、pageContext、config 和 exception 等 9 种 内 置 对 象 ,并 设计 具体 实例 练习 强化 对 这 些 
内 置 对 象 的 理解 。 

第 10 章 JSP 的 文件 操作 。 介 绍 了 ISP 实现 对 文件 的 操作 ,具体 内 容 有 File 类 、JSP 的 
输入 流 和 输出 流 .文件 的 相关 操作 ,如 文件 的 写 和 人. 读 取 、 人 和 修改. 目录 的 访问 以 及 文件 的 上 传 
等 与 文件 的 下 载 。 

第 11 章 JSP 访问 Web 数据 库 。 这 一 章 是 Web 开发 的 一 个 重要 内 容 。 介 绍 了 JDBC.JSP 
访问 数据 的 相关 操作 以 及 实现 JSP 访问 数据 库 的 常见 技巧 ,如 中 文字 符 乱 码 问题 的 解决 分 
页 显示 .连接 池 的 使 用 等 内 容 。 并 设计 了 职员 管理 系统 开发 练习 ,了 解 ISP 访问 Web 数据 库 。 

第 12 章 JSP 的 JavaBean 编程 。 介 绍 了 JavaBean 组 件 技术 ,JavaBean 访问 数据 库 以 及 
JSP 中 的 使 用 JavaBean 开发 具体 的 JSP 应 用 。 并 介绍 了 JavaMail API, 通 过 实验 练习 让 读 
者 了 解 开 发 Web Mail 系统 的 基本 原理 。 

第 13 章 JSP 的 Servlet 编程 。 介 绍 Servlet 技术 ,设计 相关 的 练习 帮助 读者 了 解 Servlet 与 
JavaBean 和 JSP 技术 结合 的 开发 模式 。 并 针对 Servlet 实现 会 话 管理 Servlet 实现 文件 管理 、 
Servlet 实现 数据 库 操 作 和 Servlet 绘制 图 形 相 关 知 识 点 ,并 设计 了 相应 的 练习 。 

第 14 章 JSP 和 XML。 主 要 介绍 JSP 是 如 何 实现 XML 在 服务 器 端的 应 用 。 是 第 5 章 
的 深入 。 具 体 介绍 的 内 容 有 JSP 生成 XML JSP 应 用 DOM API,SAX 2.0 API.DOM4J 和 
JDOM 解析 XML JSP 应 用 XML, 并 对 JSP 的 自 定义 标签 展开 说 明 。 

为 了 方便 读者 练习 ,本 书 提供 了 多 媒体 教案 以 及 教材 介绍 的 实例 的 源 代码 , 均 可 在 清华 
大 学 出 版 社 网 站 上 下 载 。 

本 书 由 南昌 大 学 的 陈 轶 主持 编写 ,南昌 大 学 的 王 炜 立 、 肖 建 、 李 文 . 印 桃 荣 、 姚 力 文 、 姚 晓 
昆 、 唐 神 玲 ,华东 交通 大 学 的 张 稚 和 江西 省 计算 中 心 的 杨 宇 仙 参 与 编写 。 其 中 本 书 第 6 章 、 
第 12 章 .第 13 章 和 第 14 章 由 陈 轶 编写 ,第 5 章 与 第 9 章 由 陈 轶 和 张 答 合 写 ,第 2 章 由 陈 轶 
TUS SE fili S 58 1.3.4.8 章 由 肖 建 编写 。 第 10.11 章 由 王 炜 立 编写 ,第 7 章 由 李 文 编写 ， 
实验 答案 由 姚 晓 昆 整理 。 最 后 由 陈 轶 统 稿 。 印 桃 荣 和 姚 力 文 两 位 老师 是 本 书 的 特别 技术 指 
导 , 对 本 书 的 编写 起 到 重要 作用 。 江 西 省 计算 中 心 的 杨 国 强 研究 员 和 陈 征 研究 员 对 全 书 进 
行 审阅 ,并 提供 了 许多 宝贵 建议 。 另 外 ,在 本 书 的 编写 过 程 中 得 到 了 南昌 大 学 的 王 命 延 教授 
等 各 位 老师 的 大 力 协助 ,在 此 表示 衷心 的 感谢 。 

由 于 编者 水 平 所 限 , 书 中 难免 存在 错误 和 不 足 之 处 ,恳请 广大 读者 对 本 书 的 提供 宝贵 意 
见 和 建议 。 
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第 1 章 Web 技 AN 


Web 全 称 为 World Wide Web( 简 称 WWW ,也 就 是 人 们 所 熟悉 的 万 维 网 ) ,是 Internet 
提供 的 一 种 信息 服务 。Web 汇集 了 各 种 不 同类 型 的 信息 , 它 的 页 面 颜色 丰富 、 包 含 文字 K 
JÉ .动画 .声音 和 视频 等 多 种 信息 内 容 , 随 着 Web 开发 技术 的 不 断 发 展 , 几 乎 所 有 的 信息 技 
术 领 域 都 或 多 或 少 受到 Web 的 影响 。 


1.1 预备 知识 


1.1.1 Internet 相关 概念 


1. IP 地 址 

IP 地 址 是 识别 Internet 中 的 主机 及 网 络 设备 的 唯一 标识 。 每 个 IP 地 址 可 以 分 为 网 络 
地 址 和 主机 地 址 两 部 分 ,长 度 为 32 位 (4B) ,由 4 个 十 进 制 数 通 过 *. ”分隔 组 成 ,每 个 十 进 制 
数 的 取 值 范围 为 0 一 255 ,描述 形式 如 : 192. 168. 0. 1。 

IP 地 址 可 以 分 为 5 类 : A 类 地 址 `.B 类 地 址 `C 类 地 址 、D 类 地 址 和 下 类 地 址 。 

2. 域名 

TCP/IP 协议 提供 了 域名 管理 系统 DNSCdomain name system) 来 为 每 个 主机 分 配 字 符 
名 称 , 也 就 是 域名 ,访问 网 络 时 该 系统 会 自动 实现 域名 与 IP 地 址 的 转换 。Internet 中 域名 
采用 分 级 命名 的 机 制 , 基 本 结构 如 下 : 


主机 名 .三 级 域名 .二 级 域名 .顶级 域名 


3. URL 

URL 提供 了 待 访问 信息 资源 在 Internet 上 的 准确 位 置 , 描 述 了 要 访问 该 资源 所 使 用 的 
访问 方式 ,提供 Web 服务 的 主机 名 、 待 访问 文档 在 主机 上 的 路 径 和 文件 名 ,以 及 客户 机 与 远 
程 主机 通信 时 使 用 的 端口 号 。 它 的 基本 格式 如 下 : 


< 访问 方式 > : //< 主 机 名 > : < 端口 号 > /< 文件 路 径 > 


1.1.2 Web 技术 概述 


Web 站 点 的 开发 可 以 分 成 客户 端 和 服务 器 端 两 部 分 ,客户 端 主要 用 于 显示 信息 内 容 ， 
服务 器 端 程序 主要 是 对 所 需 信 息 进行 处 理 。 

常用 的 Web 客户 端 开 发 技术 有 HTML .CSS 和 脚本 语言 等 ,而 常用 的 Web 服务 器 端 
开发 技术 有 JSP、ASP、PHP、ASP. NET 和 XML 等 。 

Web 采用 浏览 器 /服务 器 (Browser/Server,B/S) 工 作 模式 。 用 户 启 动 客户 端 浏 览 器 ， 
在 浏览 器 中 输入 要 访问 的 URL 地 址 ,由 浏览 器 向 Web 服务 器 发 出 请 求 : 服 务 器 根据 客户 端 
发 送 的 请 求 找到 相应 文件 ,如 文件 是 HTML 文档 , 则 将 该 文档 直接 返回 给 客户 端 ,如 果 文 

. ] » 


件 中 包含 JSP、ASP 或 PHP 程序 , 则 由 Web 服务 器 运行 该 程序 并 把 运行 结果 返回 给 客户 
端 ,如 果 程 序 中 包含 对 数据 库 的 操作 , 则 服务 器 将 指令 发 送 给 数据 库 驱 动 程序 ,由 数据 库 驱 
动 程序 执行 相关 指令 并 将 执行 结果 返回 给 Web 服务 器 ,然后 再 通过 服务 器 将 数据 运行 结果 
嵌入 页 面 并 将 完整 的 HTML 页 面 返回 给 客户 端 浏览 器 ;客户 端 接收 到 返回 页 面 后 通过 浏 
览 器 将 返回 结果 呈献 给 用 户 。 


1.1.3 HTTP 概述 


HTTP 是 用 于 从 WWW 服务 器 传送 文件 到 本 地 客户 端 浏 览 器 的 传送 协议 , 它 是 基于 请 
求 /响应 的 工作 模式 , 当 Web 浏览 器 和 服务 器 间 用 HTTP 协议 来 传送 文档 时 , 它 的 工作 过 
程 可 以 理解 如 下 : 

d) 在 浏览 器 地 址 栏 输入 URL 地 址 后 ,由 浏览 器 向 DNS 请 求解 析 该 URL 对 应 的 IP 
地 址 ,并 向 该 TP. 地 址 对 应 的 服务 器 发 送 建立 连接 的 请 求 。 

(2) 浏览 器 与 服务 器 建立 TCP 连接 。 

(3) 服务 器 给 出 响应 ,将 被 访问 文件 发 回 给 浏览 器 。 

(4) TCP 连接 被 释放 。 

(5) 客户 端 和 服务 器 断 开 连接 。 


1.1.4 Dreamweaver CS 3.0 简介 


Dreamweaver CS 3.0 是 由 Adobe 公司 推出 的 一 款 专 业 的 网 页 制作 工具 , 它 主 要 用 于 对 
Web 站 点 、 页 面 和 Web 应 用 程序 进行 设计 、 编 码 和 开发 ,通过 Dreamweaver CS, 用 户 可 以 
高 效 地 设计 开发 和 维护 网 站 和 应 用 程序 。Dreamweaver CS 使 用 方便 ,对 于 没有 熟练 掌握 
HTML 标记 和 脚本 语言 的 用 户 , 使 用 它 也 可 以 很 轻松 地 制作 出 Web 页 面 。 它 提供 了 强大 
的 编辑 环境 使 代码 编辑 更 加 方便 ,并 可 以 支持 多 种 服务 器 技术 ,同时 还 具备 后 台 文件 传输 
功能 。 

Dreamweaver CS 3. 0 的 工作 界面 如 图 1-1 所 示 , 包 括 菜单 栏 .插入 选项 栏 .文本 编辑 
区 、 属 性 面板 和 面板 组 等 。 

(1) 菜单 栏 。 菜 单 栏 包含 设计 、 开 发 .测试 Web 页 面 和 Web 应 用 程序 等 多 个 菜单 
命令 。 菜 单 栏 主要 包括 “文件 ”、“ 编 辑 ”"、“ 查 看 ”、“ 插 入 记录 ”、“ 修 改 ”“ 文 本 ”、“ 命 
令 ”“ 站 点 ”“ 窗 口 ? 和 “帮助 * 这 10 个 菜单 。 其 中 当 单 击 “ 插 入 记录 ”选项 时 ,可 以 在 其 
提供 的 子 菜单 中 选择 需要 的 HTML 元 素 直接 添加 到 当前 正在 编辑 的 页 面 中 ,其 子 菜 
单 如 图 1-2 所 示 。 

(2)“ 插 入 记录 ?选项 栏 。“ 插 和 人 记录 ?选项 栏 位 于 Dreamweaver 工作 界面 中 菜单 栏 的 下 
方 , 它 以 按钮 形式 提供 了 一 些 常用 的 插入 选项 按钮 ,如 “ 超 链接 ”"“ 电 子 邮 件 链接 ”“ 表 格 ”、 
“DIV PRE” “UR” WER” A E E, 

(3) 文本 编辑 区 。 文 本 编辑 区 包含 了 文档 工具 栏 和 文本 编辑 窗口 。 文 本 编辑 窗口 
是 用 户 使 用 最 多 的 地 方 , 可 以 在 文本 编辑 窗口 打开 多 个 文件 ,但 在 同一 时 刻 只 有 一 个 
文件 处 于 活动 状态 ,可 以 被 编辑 。 文 本 编辑 窗口 上 方 的 文档 工具 栏 用 于 在 文本 编辑 窗 
口中 切换 文件 的 各 种 视图 ,可 以 从 文本 编辑 窗口 看 到 处 于 活动 状态 的 文件 的 代码 视图 
和 设计 视图 。 
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图 1-2 “插入 记录 ?选项 的 子 菜单 


(4) 属性 面板 。 在 文本 编辑 窗口 中 选择 某 一 个 已 经 插入 的 页 面 元 素 时 ,在 属性 面板 中 
会 自动 出 现 该 元 素 的 相关 属性 并 可 以 在 此 设置 和 修改 属性 的 值 。 属 性 面板 中 显示 的 内 容 将 
随 所 选 定 的 不 同 元 素 而 不 同 。 

(5) 面板 组 。 面 板 组 中 包含 了 CSS 样式 面板 .应 用 程序 面板 ,标签 检查 器 面板 和 文件 面 
板 等 内 容 ,在 面板 中 的 操作 会 直接 显示 在 当前 正在 编辑 的 文档 中 。 


1.1.5 Office SharePoint Designer 2007 简介 


Office SharePoint Designer 2007 是 由 Microsoft 推出 的 一 款 新 产品 , 用 来 基于 
SharePoint 技术 创建 和 自 定 义 SharePoint 网 站 并 生成 启用 工作 流 的 应 用 程序 ,也 提供 了 开 
A Web 页面 和 Web 应 用 程序 的 集成 开发 环境 。Office SharePoint Designer 2007 提供 了 多 
种 专业 工具 ,利用 这 些 工具 ,用 户 在 该 环境 中 无 须 编写 代码 即 可 生成 交互 解决 方案 、 设 计 自 
定义 网 站 以 及 使 用 报告 和 托管 权限 维护 网 站 性 能 。 

Office SharePoint Designer 2007 的 工作 界面 如 图 1-3 所 示 ,包括 菜单 栏 、 工 具 栏 .文档 
编辑 窗口 ,文件 夹 列表 ,标记 属性 和 工具 箱 等 。 
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图 1-3 SharePoint Designer 2007 的 工作 界面 


CD 菜单 栏 。 菜 单 栏 包含 设计 、 开 发 、 编 辑 Web 应 用 程序 等 多 个 菜单 命令 。 菜 单 栏 
主要 包括 “文件 ”“ 编 辑 ”、“ 视 图 ”“ 插 入 ”、“ 格 式 ”“ 工 具 ”、“ 表 格 ” 和 “网 站 ”等 12 个 菜 
单项 。 

(2) 工具 栏 。 工 具 栏 位 于 SharePoint Designer 工作 界面 中 菜单 栏 的 下 方 , 它 以 按钮 形 
式 提供 了 一 些 常 用 功能 按钮 ,如 “创建 新 文件 ”"“ 打 开 文 件 ”“ 保 存 " 和 “查询 ”等 。 

(3) 文档 编辑 窗口 。 我 们 可 以 在 文档 编辑 窗口 查看 多 个 不 同文 件 的 内 容 , 但 在 同一 时 
刻 只 有 一 个 文件 处 于 活动 状态 ,可 以 被 编辑 。 文 档 编 辑 窗口 下 方 的 文件 视图 标签 用 于 在 文 
档 编 辑 窗口 中 切换 文件 的 不 同 视图 ,包括 文档 的 源 代码 和 文档 的 设计 视图 。 

(4) 文件 夹 列表 。 在 文件 夹 列表 中 显示 了 当前 处 于 活动 状态 的 待 编辑 文档 所 在 文件 夹 
的 结构 。 

(5) 标记 属性 。 标 记 属 性 窗口 中 列 出 了 在 文档 编辑 窗口 中 所 选 定 的 HTML 标记 可 设 
定 的 相关 属性 信息 。 

cor 


(6) 工具 箱 。 工 具 箱 中 列 出 了 在 Web 程序 开发 过 程 中 常用 的 各 种 工具 ,如 各 种 
HTML 标记 \ 已 定义 的 样式 表 等 。 可 以 在 此 选择 需要 的 标记 或 样式 直接 插入 到 待 编辑 的 文 
档 中 ,方便 了 程序 的 开发 。 


1.2 实验 1.1 使 用 Dreamweaver CS 新 建站 点 


实验 目的 
(1) 熟悉 Dreamweaver CS 的 使 用 。 
(2) 了 解 如 何 使 用 Dreamweaver CS 开发 页 面 。 
实验 内 容 : 
(1) 熟悉 Dreamweaver CS 3.0 的 开发 环境 ,使 用 Dreamweaver CS 3. 0 新 建 一 个 站 点 。 
(2) 用 Dreamweaver CS 3.0 开发 一 个 简易 的 网 页 页 面 。 
实验 步骤 : 
练习 1: 用 Dreamweaver CS 3. 0 建立 一 个 网 站 。 


(1) 启动 Dreamweaver CS 3.0, 可 以 看 到 如 图 1-4 所 示 界 面 ,在 该 界面 中 用 户 可 以 快速 
读 取 最 近 使 用 过 的 文档 ,访问 相关 资源 。 
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图 1-4. Dreamweaver CS 3. 0 启动 界面 


(2) 执行 “站 点 ”1“ 新 建站 点 "菜单 命令 , 则 进入 如 图 1-5 所 示 的 新 建站 点 对 话 框 。 在 
图 1-5 中 输入 新 建站 点 的 名 字 如 mysite, 和 站 点 的 URL。 单 击 “ 下 一 步 ” 按 钮 。 
(3) 根据 站 点 文件 选择 合适 的 环境 ,如 果 站 点 内 仅 包含 HTML 页 面 ,可 以 选择 “ 否 ,我 
不 想 使 用 服务 器 技术 ”, 若 包含 JSP 或 ASP 程序 则 可 选择 “是 ,我 想 使 用 服务 器 技术 ”, 若 选 
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未 命名 站 点 1 的 站 点 定义 为 E xj 


EE Jar] 
站 点 定义 ar 一 


TO Dreamweaver 中 的 站 点 是 文件 和 文件 来 的 集合 ， 它 对 应 于 服务 器 上 的 Web 


示例 : http://www. nyHost. con/nySi te. 
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eee) |e) wm Li 
图 1-5 新 建站 点 对 话 框 (编辑 文件 ) 


择 后 者 ,会 显示 如 图 1-6 所 示 下 拉 框 用 于 设 定 具 体 的 服务 器 技术 。 此 处 选择 “ 否 , 我 不 想 使 
用 服务 器 技术 ”, 然 后 单 击 “ 下 一 步 ” 按 钮 。 


x 
at jaa | 
站 点 定义 Eja — $——« 


编辑 文件 ， 第 2 部 分 


您 是 否 打算 使 用 服务 器 技术 ， 如 ColdFusion. ASP.NET. ASP. JSP Hi PHP? 


C 否 ， 我 不 想 使 用 服务 器 技术 。 W 
C 是 ， 我 想 使 用 服务 器 技术 。 W 


«x-5m|[r-5m»] ma Li] 
图 1-6 新 建站 点 对 话 框 (编辑 文件 ,第 2 部 分 ) 


(4) 选择 “编辑 我 的 计算 机 上 的 本 地 副本 ,完成 后 再 上 传 到 服务 器 ? 设 定 所 编辑 的 站 点 
文件 在 本 机 上 的 存储 位 置 ,如 图 1-7 Bros ,设置 好 后 单 击 “ 下 一 步 ? 按 钮 。 

C5) 在 弹出 的 对 话 框 中 设置 连接 到 远程 服务 器 的 方式 ,此 处 选择 “无 ”, 如 图 1-8 所 示 ， 
然后 单 击 “ 下 一 步 ” 按 钮 。 

(6) 在 弹出 的 对 话 框 中 可 以 看 到 它 显 示 出 前 面 所 设置 的 站 点 相关 信息 ,如 果 没 有 问题 
则 单 击 “ 完 成 ”按钮 , 若 需 要 修改 则 单 击 * 上 一 步 * 按 钮 回 到 相应 对 话 框 进行 修改 ,如 
图 1-9 所 示 。 
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1-9 新 建站 点 对 话 框 (总 结 ) 


至 此 新 建站 点 已 经 完成 ,可 以 在 Dreamweaver CS 3. 0 的 工作 界面 的 面板 组 中 的 文件 面 
板 内 看 到 新 建 的 站 点 mysite 已 经 显示 在 其 中 ,如 图 1-10 所 示 。 若 要 管理 该 站 点 或 其 他 已 
经 建立 的 站 点 ,可 以 选择 菜单 栏 中 的 “站 点 ”|* 管 理 站 点 ?选项 ,在 弹出 的 对 话 框 中 可 以 看 到 
已 经 创建 的 站 点 mysite, 如 图 1-11 所 示 , 可 以 对 相关 站 点 进行 管理 操作 。 


管理 站 点 x! 
一 Kew.. 
RED.. 
= mysite (D: Wysite) Sim... 
HR) 
Su... 
SAD... 


到 
o 


图 1-10 工作 面板 中 显示 新 建站 点 mysite 图 1-11 “管理 站 点 "对话 框 


接 下 来 可 以 在 站 点 mysite 中 添加 新 的 HTML 页 面 。 在 文件 面板 右 击 站 点 mysite, 在 
弹出 的 快捷 菜单 中 选择 “新 建文 件 ” 项 ,如 图 1-12 所 示 。 然 后 将 生成 的 HTML 页 面 文件 名 
定义 为 所 需 的 文件 名 ,如 login. html, 如 图 1-13 所 示 。 双 击 该 文件 , 则 在 文档 编辑 区 打开 该 
文件 的 编辑 窗口 。 
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图 1-12. 在 mysite 中 新 建文 件 ( 莱 单 ) 1-13 在 mysite 中 新 建文 件 (结果 ) 
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练习 2: 利用 Dreamweaver CS 3. 0 新 建 一 个 网 页 。 

用 Dreamweaver CS 3.0 编写 一 个 自选 主题 的 网 页 ,页 面 中 布局 结构 和 网 页 内 容 自 行 定 
义 。 要 求 : 使 用 HTML 页 面 排版 .图片 的 戏 入 表格、 表单 等 基本 标记 。 

操作 步骤 略 。 


1.3 实验 1.2 使 用 SharePoint Designer 2007 新 建站 点 


实验 目的 : 
(1) 熟悉 SharePoint Designer 2007 开发 工具 的 功能 。 
(2) 了 解 和 掌握 SharePoint Designer 2007 建设 网 站 和 开发 网 页 。 
实验 内 容 : 
(1) 熟悉 SharePoint Designer 2007 的 开发 环境 ,使 用 SharePoint Designer 2007 新 建 
一 个 站 点 。 
(2) 用 SharePoint Designer 2007 开发 一 个 简易 的 网 页 页 面 。 
实验 步骤 : 


练习 1: 用 SharePoint Designer 2007 建立 一 个 网 站 。 
(1) 启动 SharePoint Designer 2007, 然 后 执行 “菜单 ”1“ 新 建 ”| “网 站 ”菜单 命令 ,运行 结 
果 如 图 1-14 所 示 。 
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图 1-14 选择 新 建 网 站 


(2) 在 弹出 的 “新 建 网 站 ?界面 中 ,选择 “网 站 ?项 。 在 网 站 项 下 ,有 3 种 选择 方式 ,用 户 
可 以 根据 要 求 自行 选择 。 由 于 是 了 解 新 建 网 站 功能 ,此 处 选择 “常规 ”|“ 空 白 网 站 ”方式 建立 
网 站 ,并 设置 保存 网 站 文件 的 目录 。 运 行 结果 如 图 1-15 所 示 。 


B] 只 有 一 个 网 页 的 网 站 说 明 
空白 网 站 创建 一 个 没有 内 容 的 新 闻 站 


a 
O 网 站 导入 向 导 


SharePoint 模板 


选项 
dul SEIS (D) 
口 使 用 加 密 连 接 (SsL) ©) 


指定 新 网 站 的 位 置 (S) : 
FE:\Web 程 序 设计 \ 课 件 \source\ 


图 1-15 设置 建设 网 站 方式 和 路 径 


(3) 网 站 建设 完成 后 ,会 弹出 “网 站 ”窗口 。 可 以 通过 右 击 鼠标 ,根据 实际 要 求 选择 “新 
建 ” 下 的 文件 类 型 或 子 网 站 ,建设 网 站 的 具体 内 容 。 运 行 结果 如 图 1-16 和 图 1-17 所 示 。 如 
果 要 对 网 站 的 文件 进行 建设 , 则 可 以 在 网 站 下 双击 具体 文件 就 可 以 进入 指定 文件 的 编辑 
界面 。 


ERED 编辑 他) WG) WAG ERO TAG) BG) 网 站 (5) MEEO) FARRO 窗口 (WD BG) 
7 -] > 5 ii RRR- 局 


HRT- RA” -| -[ 
文件 夹 列表 ao xj[a Pk] 工具 箱 ox 
口 E:Wet 程 序 设计 \ 课 件 \sourco| “E:\Web 程 订 设 计 \ 课 件 \source” 的 内 容 D za ajam 

名 称 [7] 大 小 | 类 型 ERAN aa me 


HO >) HDILQD 
350) PID aseo) 
a 向 上 一 级 四 D cs 
a nuc W SharePoint NIS... 


网 站 设置 ([)..， |t 文件 夹 E) 


TREE 
BRR BE Rc ai a 


图 1-16 选择 新 建 
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图 1-17 新 建 HTML 文件 成 功 


练习 2: 用 SharePoint Designer 2007 开发 一 个 网 页 页 面 。 
请 用 SharePoint Designer 2007 编写 一 个 自选 主题 的 网 页 ,页 面 中 布局 结构 和 网 页 内 容 
自行 定义 。 要 求 : 使 用 HTML 页 面 排版 图片 的 嵌入 .表格 .表单 等 基本 标记 。 比 较 


Dreamweaver CS 3.0 和 SharePoint Designer 2007 在 建设 网 站 和 开发 页 面 上 功能 的 异同 。 
操作 步骤 略 。 


x. E os 


第 2 章 HTML X] XHTML 


4G A Internet 信息 时 代 , 网 页 已 经 成 为 人 们 进行 信息 交流 的 一 种 手段 。 而 HTML 与 
XHTML 是 编写 网 页 的 基础 。 通 过 对 HTML 和 XHTML 基本 语法 以 及 常见 标签 的 了 解 ， 
可 以 帮助 用 户 开发 形式 生动 ,内容 丰富 的 页 面 。 在 本 章 中 ,将 针对 HTML 和 XHTML 的 基 
本 语法 以 及 常见 的 标签 设计 相关 的 实验 ,引导 读者 进入 设计 和 开发 网 页 世界 。 


2.1 预备 知识 


2.1.1 HTML 的 概述 


HTML 表示 超 文本 标记 语言 ,是 万 维 网 的 基本 描述 语言 。HTML 可 以 支持 文本 、 超 链 
接 、 图 像 多媒体、 脚本 语言 和 样式 表 等 多 种 形式 的 内 容 。HTML 定义 网 页 必须 在 网 络 浏览 
器 中 解释 运行 。 目 前 HTML 已 经 得 到 了 广泛 的 支持 和 运用 。 

1. HTML 的 页 面 结构 

HTML 的 页 面 用 html 标记 定义 ,在 页 面 内 可 以 分 成 两 部 分 : 页 面 头 、 页 面 主体 。 其 中 页 
面 头 用 head 标记 定义 ,而 页 面 主体 通过 body 标记 定义 。 有 时 为 了 对 页 面 的 代码 进行 说 明 , 往 
往 用 “二 ! 一 一 注释 一 一 二 ”定义 注释 。 关 于 定义 HTML 页 面 结构 的 基本 标记 见 表 2-1。 


表 2-1 HTML 页 面 结构 的 基本 标记 


te dc 说 明 b dd 说 — 明 

head 定义 页 面 头 html 定义 页 面 

title 定义 页 面 的 标题 body 定义 页 面 主体 
定义 元 数据 ,具有 属性 : div 定义 组 合 块 


http-equiv; 定义 HTTP 响应 头 


meta name: 描述 网 页 span 定义 文档 的 内 联 元 素 
content: 说 明 页 面 内 容 hl~h6 定义 各 种 规格 的 头 标题 
hr 定义 水 平 线 address 定义 联络 信息 


2. HTML 的 常见 标记 

除了 与 页 面 定 义 相 关 的 标记 ,HTML 还 根据 实际 需要 定义 了 “文本 处 理 标记 ”、“ 图 像 标 
记 ”“ 链 接 标记 ”“ 表 格 标记 ”“ 表 单 标 记 ” 和 “框架 标记 ”等 ,这 些 标记 的 组 合 可 以 设计 出 生 
动 的 网 页 内 容 。 这 些 标记 的 内 容 介绍 见 表 2-2. 

3. HTML 的 字符 实体 

为 了 表示 特殊 含义 的 内 容 ,HTML 定义 了 字符 实体 。 这 些 字符 实体 可 以 用 两 种 形式 表 
示 “& FERR O 字符 编号 ”。 通 过 它们 可 以 表达 特定 的 字符 信息 。 例 如 “&nbsp;” 和 
“E #160;” 表 示 空 格 。 
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X 2-2 HTML 的 常见 标记 


类 m hs dc 说 明 类 型 te ic 说 明 
p 定义 段落 ul 定义 无 序列 表 
pre 预定 义 文本 ol 定义 有 序列 表 
em 定义 等 宽 字 体 li 定义 列表 项 
列表 处 理 
Strong 定义 强调 字体 dl 定义 定义 列表 
dfn 定义 字体 dt 定义 描述 项 
code 定义 代码 字体 dd 定义 解释 项 
samp 定义 范例 字体 table 定义 表格 
kbd 定义 键盘 字体 thead 定义 表 头 
var 定义 变量 字体 tbody 定义 表 的 主体 
文本 处 理 
cite 定义 引用 字体 tfoot 定义 表 尾 
表格 处 理 
abbr 定义 简写 字体 caption 定义 表 的 标题 
acronym 定义 缩 略 字体 tr 定义 表 的 行 
sup 定义 上 标 字 体 th 定义 表 头 单元 格 
sub 定义 下 标 字体 td 定义 表 的 单元 格 
ins 定义 被 插入 的 文本 style 定义 内 联 样式 
del 定义 已 被 删除 的 文本 font 定义 字体 
blockquote | 定义 块 引用 b 定义 粗 体 文本 
br 换行 u 定义 下 划 线 文本 
样式 
form 定义 表单 i 定义 斜体 文本 
input 定义 输入 域 tt 定义 等 宽 文 本 
textarea 定义 文本 域 big 定义 大 号 字体 
select 定义 选择 列表 small 定义 小 号 字体 
optgroup 定义 选项 组 frameset 定义 框架 
表单 处 理 
option 定义 选项 frame 定义 子 窗 口 
m 框架 处 理 
ae |e noframes — | 定义 不 支持 框架 内 容 
fields 义 表 
ieldset 定义 表单 域 创建 内 联 框架 
legend 定义 表单 域 的 标题 
img 定义 图 像 
label 定义 标签 
i map 定义 客户 端 图 像 映射 
X 或 链 
图 像 、 对 象 | area 图 像 映射 区 域 
超 链接 link 定义 链接 外 部 文件 和 Applet 
object 定义 嵌入 对 象 
base 定义 当前 文档 的 基 址 
脚本 et 定义 脚本 applet 定义 对 入 applet 


DELE 


2.1.2 XHTML 的 概述 


XHTML 表示 扩展 超 文本 标记 语言 ,是 在 HTML 4.01 的 基础 上 ,用 XML 1.0( 扩 展 标 
记 语 言 ) 改 写 而 成 的 。 这 使 得 XHTML 既 具 有 HTML 语言 的 特色 ,可 以 用 同样 的 标记 表示 
数据 的 内 容 , 也 具有 XML 语言 的 严格 语法 约束 ,方便 定义 数据 。 XHTML 能 够 结构 化 地 表 
达 数 据 , 强 化 对 模块 的 支持 ,符合 数据 内 容 与 显示 分 离 的 发 展 趋势 ,是 当前 开发 网 页 的 主要 
标记 语言 。 

XHTML 是 在 HTML 的 基础 上 发 展 而 来 , 它 具 有 HTML 类 似 的 标记 定义 、 数 据 类 型 、 
字符 实体 ,文件 结构 表示 ,但 由 于 必须 符合 XML 的 严格 语法 要 求 , 又 体现 出 与 HTML 不 同 
的 特点 。 

(D XHTML 文档 必须 通过 DOCTYPE 来 声明 文档 类 型 定义 。 与 HTML 中 文档 类 型 
定义 的 可 有 可 无 形成 鲜明 的 对 比 。 

(2) XHTML 文档 的 html 标记 中 必须 指定 属性 xmlns, 说 明 XML 的 命名 空间 是 
“http://www. w3. org/1999/xhtml”。 如 果 在 文档 中 忽略 对 XML 命名 空间 的 说 明 , 系 统 会 
自动 将 上 述 的 命名 空间 加 入 到 文档 中 。 

(3) 与 HTML 语法 松散 形成 对 比 ,XHTML 必须 是 良 构 的 。 这 表示 XHTML 的 标记 
TY PARKS BEREA., XHTML 的 所 有 标记 必须 用 小 写字 符 表示 。XHTML 的 标记 必 
须 是 封闭 的 ,这 表明 即使 是 XHTML 的 空 标记 ,也 必须 用 空格 与 “/” 作 为 结束 , 如 
“<br/ 二 ”此 外 ,XHTML 标记 的 属性 必须 用 显示 的 “= 进行 赋值 ,不 能 采用 HTML 中 使 
用 的 简写 形式 赋值 。 

(4) XHTML 中 取消 了 HTML 中 name 和 id 属性 定义 标记 名 的 混乱 情况 ,而 是 统一 用 
id 属性 区 分 不 同 的 标记 。 


2.1.3 网 站 设计 的 基本 要 素 


学 习 使 用 标记 语言 是 设计 和 开发 网 站 的 基础 。 要 建立 一 个 高 质量 的 网 站 还 需要 结合 其 
他 技术 和 知识 ,如 美术 ,心理 学 等 。 通 常 开始 建设 一 个 网 站 ,要 充分 考虑 以 下 几 个 方面 : 

(1) 明确 网 站 的 客户 定位 。 一 个 网 站 是 否 有 用 ,并 不 是 这 个 网 站 采用 了 多 种 技术 手段 ， 
而 是 这 个 网 站 是 否 有 人 浏览 访问 ,是否 愿 意 接受 服务 。 所 以 网 站 的 客户 定位 就 是 明确 网 站 
提供 服务 或 提供 咨讯 的 群体 对 象 。 例 如 ,老人 、 儿 童 、 少 年 等 不 同 的 网 站 服务 群体 对 象 在 使 
用 网 站 的 各 个 方面 都 有 所 不 同 。 客 户 的 定位 在 网 站 设计 中 首先 要 得 到 体现 ,因此 ,建立 网 站 
实质 上 是 “建立 以 用 户 为 中 心 ”的 网 站 。 

(2) 确定 网 站 的 主题 。 确 定 网 站 的 主题 就 是 确定 网 站 的 内 容 。 即 网 站 的 功能 .作用 、 提 
的 服务 或 信息 ,这 是 网 站 开发 的 核心 内 容 。 如 果 网 站 的 主题 含糊 不 明确 ,客户 会 失去 访问 
网 站 的 信心 。 

(3) 确定 网 站 的 色彩 体系 。 设 计 网 站 时 要 明确 网 站 的 色彩 的 选择 和 搭配 。 访 问 网 站 的 
第 一 观感 并 不 是 网 站 的 内 容 和 布局 ,而 是 色彩 的 搭配 。 合 理 的 色彩 选择 和 搭配 会 让 网 站 突 
出 主题 ,对 网 站 浏览 者 的 情绪 会 产生 影响 。 色 彩 一 般 不 宜 太 多 ,以 两 三 种 主题 色彩 为 好 。 具 
体 关于 色彩 体系 (Color Schema) 请 参看 有 关 资 料 , 此 处 不 再 介绍 。 
(4) 遵循 设计 的 基本 原则 。 设 计时 应 充分 体现 简洁 直观 。 客 户 访问 网 站 要 非常 容易 达 
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到 服务 的 内 容 , 整 个 过 程 易学 简单 。 另 外 ,网 站 要 快速 ,要 充分 考虑 客户 的 计算 机 普遍 较 低 
配置 ,如 果 客 户 访问 的 页 面 ,时 间 过 长 的 话 会 影响 访问 网 站 的 兴趣 。 这 就 使 得 设计 人 员 在 多 
媒体 的 应 用 中 不 能 牺牲 访问 速度 来 实现 复杂 华而不实 的 效果 ,所 以 像 Flash 动画 、 视 频 等 较 
大 的 文件 要 慎 用 。 

(5) 建立 良好 的 页 面 结 构 。 页 面 结构 明确 网 站 网 页 具体 的 内 容 以 及 这 些 内 容 在 网 页 的 
布局 。 良 好 的 页 面 结构 可 以 让 用 户 快 速 找到 需要 的 内 容 , 而 不 是 在 各 种 链接 中 无 所 适 从 。 
要 实现 良好 的 页 面 结构 ,可 以 通过 logo、 简 洁 高 效 的 导航 栏 、 高 质量 的 站 点 链接 等 。 


2.2 实验 2.1 HTML 基本 标签 的 应 用 


实验 目的 : 


(1) 了 解 HTML 5 XHTML 文件 的 基本 结构 。 

(2) 熟练 掌握 HTML 和 XHTML 的 常见 标记 。 

(3) 掌握 和 比较 HTML 和 XHTML 语法 要 求 的 异同 。 
(4). 能 根据 实际 要 求 开发 和 设计 简单 的 静态 网 页 。 


实验 内 容 : 


(1) 分 析 用 HTML 编写 的 网 页 Demo2_1. html, 试 运行 该 网 页 的 运行 结果 。 然 后 将 该 
网 页 用 XHTML 语言 改写 。 

(2) 阅读 和 运行 网 页 Demo2 2. html, 指 出 并 修改 该 网 页 中 存在 的 错误 。 并 说 明 原 因 。 

(3) 设 计 并 开发 一 个 “个 人 简历 ”的 网 页 。 


实验 步骤 : 


选择 开发 网 页 的 工具 , 按 顺 序 依次 完成 上 述 的 练习 。 

练习 1: Tf HTML 和 XHTML 网 页 的 基本 结构 。 

本 练习 帮助 用 户 了 解 HTML 文件 与 XHTML 文件 的 基本 结构 。 具 体 要 求 如 下 : 

(1) 阅读 和 试 运行 Demo2_1. html 网 页 , 见 程序 清单 2-1。 说 出 定义 该 网 页 所 有 标记 的 
作用 。 

(2) 比较 网 页 中 使 用 的 标记 span 和 标记 div 的 异同 .比较 标记 p 和 标记 pre 的 异同 、 比 
较 标 记 strong 和 标记 big 的 异同 。 

(3) 按照 XHTML 语法 ,将 Demo2 1. html 进行 改写 符合 XHTML 过 渡 类 型 的 文件 ， 
并 将 改写 好 的 文件 保存 为 “Demo2_1. xhtml”, 如 果 改 写成 功 , 则 在 网 络 浏览 器 中 可 以 正常 
运行 。 

(4) 依次 对 XHTML 改写 的 网 页 的 文档 类 型 分 别 设 置 为 “严格 类 型 ”和 * 框 架 类 型 ”, 比 
较 3 种 不 同 XHTML 文档 类 型 的 不 同 之 处 。 

程序 清单 2-1: 


«!--Demo2 1.html--» 
<html> 
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<head> 

<title> 第 一 个 HTML 网 页 < /title» 

«meta name- "keywords" content- "网 页 基础 ,Web page"> 

«meta name= "author" content= " 陈 轶 ,ChenYi,chenyi"> 

«style type="text/css"> 

xde- 

.textstyle( 
text- decoration:underline 
) 

--» 

</style> 
</head> 
<body align="center"> 

«n3» T fif#<strong><big> H«c /big> MK /strong> Fil< strong» « big» X« /big> HIMIK / strong» « /h3» 

«p» 

<div class- "textstyle"»Jb A <b> Internet< /b> 信息 时 代 , 网 页 已 经 成 为 人 们 进行 信息 交流 的 
一 种 手段 。< /div> 而 <b> HTML< /b» 5j <b> XHTML« /b> 是 编写 网 页 的 基础 。 通 过 对 <b>HTML< /b> 和 <b 
>XHTML< /b> 基本 语法 以 及 常见 标签 的 了 解 ,可 以 帮助 用 户 开 发 生动 内 容 丰 富 的 页 面 。<br> 在 本 章 
中 ,将 针对 <b>HTML< /b> 和 <b> XHTML< /b> 的 基本 语法 以 及 常见 的 标签 设计 相关 的 实验 ,引导 读者 进 
入 设计 和 开发 网 页 世界 。 
</p> 
<pre> 

<span class="textstyle"> 步 人 <b> Internet« /b> 信息 时 代 , 网 页 已 经 成 为 人 们 进行 信息 交流 的 
一 种 手段 。< /span> 

而 <b> HTML< /b> 与 <b> XHTML< /b> 是 编写 网 页 的 基础 。 通 过 对 <b> HTML< /b> 和 <b>XHTML < /b» 4E 
本 语法 以 及 常见 标签 的 了 解 ,可 以 帮助 用 户 开发 生动 内 容 丰 富 的 页 面 。 在 本 章 中 ,将 针对 <b>HTML</ 
b> 和 <b> XHTML< /b> 的 基本 语法 以 及 常见 的 标签 设计 相关 的 实验 ,引导 读者 进入 设计 和 开发 网 页 
世界 。 
< /pre» 
<hr width= "80% "> 
<address> 
<p align="center"> &quot;Web 程序 设计 实用 教程 squot; 编 写 小 组 <br> 
E-mail: <a href= "mailto:somebody@ yahoo.com.cn"> sombody@ yahoo.com.cn< /a> 
</p> 
< /body> 
</html> 


5&2] 2: 比较 HTML 5 XHTML 文件 的 异同 。 

本 练习 的 目的 是 比较 HTML 与 XHTML 文件 的 异同 。 网 页 Demo2_2. html 是 一 个 能 
显示 “太阳 系 星系 ”的 XHTML 文件 。 显 示 的 效果 是 , 当 用 户 用 鼠标 选中 一 个 星球 会 显示 该 
星球 的 名 字 。 由 于 该 文件 在 书写 过 程 中 按照 HTML 4. 01 的 语法 要 求 书写 ,导致 网 页 无 法 
在 浏览 器 中 正常 显示 。 要 求 如 下 : 

(1) 在 Dreamweaver CS 中 打开 Demo2_2. html, 将 Demo2 2. html 中 修改 文档 类 型 说 
明 为 HTML 的 过 渡 类 型 ,并 保存 为 Demo2_2. htm, 并 选择 Dreamweaver CS 的 “窗口 \ 结 
果 ” 选 项 ,打开 “结果 窗口 ”, 选 择 “ 验 证 "项目, 执行“ 验证 当前 文档 ”, 如 图 2-1 所 示 。 观 察 验 
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结果 再 运行 ,并 记录 运行 结果 。 


(XHTEL)] 


XPO SEO SEW HAD CRW IE SFO HAG BOW 帮助 中 
第 用 = &wmEÀ&|Bmgim-é-mbg B o 


T 
body? h3. STYLE1> 4$ Q 100% v|T71xl6lv 2K/ 1% 


Tb 属性 
TY 结果 “搜索 | 参考 ug 目标 浏览 器 检查 | 链接 检查 器 | 站 点 报告 | FTP 记 录 | 服务 器 调试 & 
B ow 行 。 描述 

验证 当前 文档 名) 未 找到 错误 或 警 省 。[YTNL 4.0] 

设置 


图 2-1 验证 过 程 示意 


(2) 阅读 Demo2_2. html tl ete 的 问题 。 比 较 自行 找 出 的 问题 与 
Dreamweaver CS diii 结果 是 否 一 致 。 请 遵照 XHTML 语法 要 求 , 修 改 该 文件 使 之 能 正 
常 输出 。 要 求 运 行 结果 与 题 意 要 求 的 显示 效果 保持 一 致 

程序 清单 2-2: 


<!--Demo2 2.html --> 
< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.wW3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"» 
<html xmlns- "http://www .w3.0rg/1999/xhtml"» 
<head> 
«meta http- equiv= "Content- Type" content= "text/html; charset=gb2312"> 
«title» E$ HTML 与 XHTML 文件 的 异同 < /title> 
«style type- "text/css"» 
<== 
body { 
background-color: #1D1D1F; 
} 
.STYLEl (color: #CCCCCC} 
==> 
</style> 
</head> 


<body> 
<h3 align="left" class= "STYLE1"> X [H # < /h3> 


<div align="center"> 


<img src= "image/sun. jpg" alt= "太阳 系 示 意图 "useMAP= "4 sun" 


«MAP name- "sun" id="sun"> 


X Area shape- "circle" 
X Area shape- "circle" 
X Area shape- "circle" 
«Area shape- "circle" 
X Area shape- "circle" 
«Area shape- "circle" 
« Area shape- "circle" 
X Area shape- "circle" 


coords- "76,102, 40" alt- "X fH "> 
coords- "136, 99, 4" alt= "水星 "> 
coords-"157,101,9" alt= "4r Hi "> 
coords- "180,100, 6" alt- "Jl Ej "> 
coords- "204,98, 6" alt=" Fi "> 
coords- "236, 99,18" alt=" Œ "> 
coords- "281,100, 11" alt="+ Ri "> 
coords= "325,99,10" alt- "X T Hi "» 


« Area shape- "circle" coords- "382,99,8" alt= "海王 星 "> 
«Area shape- "circle" coords-"422,98,5" alt=" £ Æ "> 
< /MAP> 
</div> 
</body> 
</html> 


练习 3: 设计 和 开发 “个 人 简历 "网 页 。 

通过 本 练习 熟练 运用 HTML/XHTML 标记 开发 和 设计 网 页 。 本 练习 的 内 容 是 设计 和 
开发 一 个 “个 人 简历 ”的 一 个 网 页 ,要求 : 简历 的 内 容 包 括 * 基 本 情况 (包括 姓名 .出 生年 月 、 
性 别 .电话 .手机 个 人 照片 等 ) .学 习 经 历 . 工 作 经 历 . 个 人 能 力 ”; 网 页 要 明确 网 页 的 类 型 ,对 
网 页 中 部 分 标题 选择 特定 头 标题 定义 ,不同 部 分 有 明显 的 段落 或 用 换行 分 割 。 对 于 简历 中 
有 特色 的 部 分 用 不 同 的 字体 突现 强调 。 在 网 页 最 后 部 分 要 用 address 标记 说 明 联 系 E-mail 
以 及 联系 地 址 。 开 发 网 页 的 素材 自行 选 定 。 

操作 步骤 略 。 


2.3 实验 2.2 列表 和 表格 的 设计 


实验 目的 : 


(1) 熟练 掌握 构成 列表 的 标记 以 及 相关 属性 的 作用 。 

(2) Y fit 3 种 不 同类 型 的 列表 ,比较 它们 的 不 同 用 法 。 

(3) 了 解构 成 表格 的 标记 ,以 及 应 用 表格 的 设计 网 页 布局 和 数据 显示 。 
实验 内 容 : 

CD 用 表格 定义 数据 。 制 作 一 个 用 户 月 消费 表 , 具 体 包括 的 项 目 有 生活 方面 (校内 饮 
食 、 校 外 饮食 、 服 装 \ 日 化 用 品 、 其 他 ) ,学 习 方面 (考试 费用 ,培训 费用 ,书籍 费用 ) ,休闲 娱乐 
方面 (旅游 .上 网 费用 .电影 .音乐 .通信 ) 这 三 方面 。 用 户 也 可 以 参照 自身 情况 编写 。 

(2) 设计 一 个 网 上 书店 主页 面 。 页 面 的 布局 是 传统 的 上 下 中 左右 型 。 要求 用 表格 来 设 
置 布 局 。 灵 活 运 用 列表 来 定义 页 面 的 内 容 。 
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实验 步骤 : 


练习 1: 用 表格 定义 和 表示 数据 。 

本 次 练习 的 目的 是 了 解 制作 表格 的 相关 标记 的 使 用 。 要 求 : 提供 网 页 的 部 分 代码 如 程 
序 清单 2-3(Demo2_3. html) 所 示 , 将 该 程序 补充 完整 ,使 之 能 显示 一 个 学 生 的 月 消费 
表 (5 行 4 列表 格 ) .该 表格 中 定义 3 个 项 目 : 生活 方面 (校内 饮食 .校外 饮食 .服装 .日 化 用 
品 、 其 他 ) ,学 习 方面 (考试 费用 .培训 费 用 书籍 费用 ) ,休闲 娱乐 方面 (旅游 .上 网 费用 .电影 、 
音乐 .通信 )。 此 外 ,还 需要 显示 制作 表格 的 时 间 。 有 具体 数据 可 以 参照 自身 情况 定义 。 对 于 
不 同 项 目 用 不 同 颜色 突现 ,运行 结果 类 似 图 2-2。 
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图 2-2 月 消费 表示 例 图 


程序 清单 2-3: 


<!--Demo2_3.html --> 

< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.wW3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"» 

«html xmlns= "http: //www.w3.0rg/1999/xhtml"» 

<head> 

«meta http- equiv- "Content- Type" content= "text/html; charset- gb2312"/» 
<title> 某 大 学 生 月 消费 单 < /title> 

</head> 


<body> 
<p align="center"> 
<table border- "0" width= "60% "> 
<caption> 
某 大 学 生 2008 年 9 月 消费 单 
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< /caption» 
<thead> 
«tr» 
«th width= "35"> 项 目 < /th> 
<th width= "148"> 类 别 < /th> 
«th width="149"> 存 在 消费 行为 (是 / 否 )< /th> 
«th width= "53"> 消 费 额 < /th> 
</tr> 
« /thead» 
«tfoot» 
«tr» 
«td colspan- "3" bgcolor- "# 99FF99"> 
<div align="right"> if :« /div>< /td» 
<td bgcolor= "4 99FF99"» 1845 元 < /td» 
</tr> 
< /tfoot> 
< tbody> 
<!-- 补 充 代码 ,指定 表格 体 --> 
« /tbody» 
</table> 
<div align="center"> X$ ifi] 4E AY [a] :2008 4F 10 H </div> 
</p> 
< /body> 
</html> 


5&2] 2. 表格 和 列表 实现 网 页 布局 。 

本 练习 的 主要 目的 进一步 掌握 表格 的 应 用 ,并 用 表格 定义 网 页 的 页 面 结构 。 此 外 ,体会 列 
表 在 网 页 中 的 应 用 。 具 体 实验 内 容 是 ,在 Dreamweaver 中 新 建 一 个 网 页 文件 Demo2_4. html. 
在 这 个 网 页 中 实现 一 个 网 上 书店 的 展示 书籍 页 面 。 要 求 : 

(1) 网 上 书店 的 布局 是 上 (左右 ) 中 (左右 ) 下 如 图 2-3 所 示 ,其 中 : 上 左 部 分 插入 书店 的 
标 图 ( 即 Logo) ;上 右 部 分 定义 书店 经 营 书 商品 的 类 别 ( 文 学 .科技 、 少 儿 、 教 育 、 管 理 等 ); 中 
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书店 标 图 网 上 书店 的 展示 项 目 


书店 的 各 
类 排行 榜 


上 书店 的 主要 内 容 : 


do X ps 
[IIl 
deris susce 
RISK mue 
DE 
PERH 1001140 
Wood mam 


网 上 书店 的 地 址 以 及 联系 方式 


Zeigen i treeshupH LE 2004-2009, ALi Rights Beaerved 


(a) (b) 
图 2-3 网 上 书店 的 布局 和 运行 示例 
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左 部 分 定义 书店 的 各 类 排行 (如 销售 排行 、 人 气 排行 .推荐 排行 等 ); 在 中 右 部 分 是 网 页 主体 ， 
定义 网 上 书店 热 销 的 各 类 书籍 ;下 部 定义 书店 的 地 址 以 及 联系 方式 。 具 体内 容 和 素材 可 以 
自行 定义 。 

(2) 在 网 页 的 “上 右 ”“ 中 左 ”“ 中 右 ” 部 分 ,分 别 用 序列 列表 、 无 序列 表 和 定义 列表 处 理 
显示 的 内 容 。 

思考 : 比较 无 序列 表 、 有 序列 表 以 及 定义 列表 3 种 列表 的 异同 。 请 解释 在 网 页 中 使 用 
列表 的 原因 ? 

操作 步骤 略 。 


2.4 实验 2.3 表单 制作 注册 页 面 


实验 目的 : 


CL) 了 解 制作 表单 常见 组 件 ( 包 括 文本 框 ,发 送 按钮 .文本 区 等 ) 的 制作 。 
(2) 能 熟练 运用 表单 的 相关 标记 解决 实际 问题 。 


实验 内 容 : 


要 求 为 一 个 邮件 服务 网 站 提供 一 个 注册 新 邮件 的 注册 页 面 。 对 于 该 注册 页 面 的 内 容 需 要 
KAE: 邮箱 ,密码 、 确 认 密 码 .昵称 ,性 别 、 密 码 保护 问题 .密码 保护 问题 的 回答 .密码 保护 问题 
的 提示 ,选择 兴趣 组 (旅游 文学 .运动 音乐, 电影. 手机、 财经 .宠物 等 ) 和 服务 条 款 各 项 内 容 。 


实验 步骤 : 

在 网 页 开发 工具 如 Dreamweaver CS 3.0 中 打开 已 有 的 网 页 Demo2_5. html, 见 程序 清 
单 2-4 ,阅读 实验 内 容 , 然 后 按照 下 列 步骤 完成 实验 内 容 指 定 注册 表单 的 制作 。 

程序 清单 2-4: 


<!1--Demo2 5.html--» 
< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 


"http: //www.w3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"» 

«html xmlns= "http: //www.w3.0rg/1999/xhtml"» 

<head> 

«meta http- equiv- "Content- Type" content= "text/html; charset- gb2312"/» 
«title» 2 DATEI « /title> 

</head> 


<body> 
< form name= "frml"> 
<1label> 注 册 邮 箱 :< /label> 
«label» f: < /label> 
<label> 确 认 密 码 : < /label> 
<1label> 密 码 保护 问题 < /label> 
< label> [hl #< /1abel» 
<1label> 密 码 保 护 问题 的 提示 < /label> 
a 93 o. 


< label» We F< /label> 
<label> 加 入 兴趣 组 < /label> 
<label> 服 务 条 款 : < /label> 
<label> 我 已 经 阅读 并 同意 服务 条 款 和 隐私 权 政 策 。 我 对 账户 的 使 用 遵守 中 华人 民 共 和 国法 律 。 
</label> 
«textarea name- "service"> 
本 服务 公约 构成 您 与 我 们 之 全 部 协议 ,并 规范 您 对 于 本 服务 之 使 用 行为 。 本 服务 公约 及 您 与 
我 们 之 关系 , 均 受 到 中 华人 民 共 和 国法 律 管辖 。 我 们 未 行使 或 执行 本 服务 公约 任何 权利 或 规 
定 , 不 构成 对 前 述 权利 或 权利 之 放弃 。 倘 本 服务 公约 之 任何 规定 因 与 中 华人 民 共 和 国法 律 抵 
和 触 而 无 效 , 您 依然 同意 应 依照 法 律 ,努力 使 该 规定 所 反映 之 当事人 意向 具备 效力 , 且 本 服务 公 
约 其 他 规定 仍 应 具有 完整 的 效力 及 效果 。 本 服务 公约 之 标题 仅 供 方便 而 设 , 不 具 任 何 法 律 或 
契约 效果 。 
< /textarea» 

</div> 


</form> 
</body> 
</html> 


(1) Jy Demo2 5. html 中 ,选择 合理 的 组 件 将 程序 清单 中 没有 定义 的 注册 内 容 补充 完 
整 , 并 保存 。 

(2) 定义 “发 送 " 和 “ 重 置 "按钮 ,让 它们 分 别 实现 将 注册 的 信息 发 送 到 指定 页 面 和 将 注 
册 信 息 全 部 清空 的 功能 ,观察 运行 结果 。 比 较 并 回答 按钮 组 件 .发送 按 钮 组 件 和 重 置 按钮 组 
件 的 不 同 。 

G) 如 果 和 希望 表单 能 放置 到 一 个 表单 域 中 ,并 定义 一 个 表单 标题 “会 员 邮 件 注册 ”, 运 行 
结果 类 似 图 2-4, 请 在 Demo2_5. html 中 加 入 实现 内 容 。 
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会 员 注册 信息 


注册 邮箱 : @| * 
密码 ; * 

确认 密码 : * 

密码 问题 

密码 问题 回答 

密码 问题 提示 

Wk * 

sw 58 

加 入 兴 超 组: 20 250 体育 回 RFO 时 尚 卓 RECO 
同意 加 入 邮件 列表 ， RO SO 


服务 条 款 : 

我 已 经 阅读 并 同意 服务 条 款 和 降 私 权 政策 。 我 对 帐户 的 使 用 遵守 中 华人 民 共和 国法 律 。 
See ee 并 规范 您 对 于 本 

ABA ARBEGRDLZER, 均 受到 中 华人 民 共和 国 

法 律 管辖 . 我 们 


未 行使 或 执行 本 服务 公约 任何 权利 或 规定 ， 不 构成 对 前 
述 权利 或 权利 之 放 
弃 。 俏 本 服务 公约 之 任何 规定 因 与 中 华人 民 共和 国法 律 
WETEN, Ek 
然 同意 应 依 四 法 律 ， 努 力 使 该 规定 所 反映 之 当事人 意向 


发 送 | | 重 写 


2-4 有 表单 域 标题 的 注册 页 面 


(4) 将 定义 的 会 员 注 册 表 单 在 页 面 中 设计 合理 的 样式 ,使 得 表单 显示 合理 ,项 目 和 组 件 
能 明显 区 分 。 


2.5 实验 2.4 多 重 框架 和 超 链 接 


实验 目的 : 


COD 了 解 和 熟练 运用 定义 多 重 框架 的 相关 标记 。 

(2) 比较 多 重 框架 与 表格 在 设计 网 页 布局 的 不 同 之 处 ,了 解 二 者 的 应 用 领域 。 

(3) 了 解 和 熟练 掌握 超 链 接 的 相关 标记 。 

(4) 运用 超 链接 解决 实际 问题 。 

(5) 初步 了 解 设 计 和 建立 网 站 的 关键 要 素 以 及 过 程 。 
实验 内 容 : 

(1) 分 别 利用 框架 结构 和 表格 结构 为 太阳 系 的 八大 行星 及 冥王 星 建立 一 个 简易 网 站 。 

(2) 自选 一 个 主题 (如 个 人 网 站 ,班级 网 站 、 学 院 网 站 、 小 型 花 店 网 站 、 奥 运 宣传 网 站 
等 ) ,根据 选择 的 主题 ,设计 和 建设 网 站 。 

(3) 访问 Nokia 中 国 网 站 (http://www. nokia. com. cn), Nokia 香港 网 站 (http:// 
www. nokia. com, hk), Nokia 全 球 网 站 (http://www. nokia. com) ,比较 三 个 网 站 主页 界面 
的 异同 。 访问 中 国 三 星 电 子 网 站 (http://www. samsung. com/cn)、 香 港 三 星 电 子 网 站 
(http://www. samsung. com. hk) ,比较 它们 网 站 主页 界面 的 异同 。 并 对 Nokia 中 国 网 站 
和 三 星 中 国 网 站 的 首页 的 界面 设计 进行 比较 。 


实验 步骤 : 


本 实验 是 由 3 个 任务 构成 。 

5&2] 1; 建立 介绍 太阳 系 八 大 行星 及 冥王 星 的 简易 网 站 。 

本 次 练习 的 目的 是 了 解 和 运用 框架 结构 和 多 链接 的 实现 。 已 有 了 网 页 top. html, 
left. html 和 main. html。 其 中 ,top. html 定义 了 关于 该 网 站 的 logo, 代 码 见 程序 清单 2-5， 
left. html 定义 了 10 个 链接 (主页 水星 、 金 星 、. 地 球 、. 火星、 木星 土星、 天王星, 海王星 、 冥 王 
SL) ,分 别 链接 main. html 对 应 的 书签 , 见 程序 清单 2-6,main. html 是 对 太阳 系 的 一 个 简单 
介绍 ,并 通过 一 个 太阳 系 的 图 中 设置 行星 的 映射 ,实现 对 行星 的 快速 导航 。 要 求 : 

(1) 请 定义 一 个 “上 左右 ”型 的 框架 网 页 Demo2_6. html, 如 图 2-5。 


top.html 


main.html 


juny ye 


图 2-5 上 左右 框架 示例 


和 


(2) 单 击 left. html 的 链接 ,观察 运行 结果 。 修 改 程序 清单 2-6 ,使 得 单 击 链接 后 ,能 在 
新 窗口 打开 目标 内 容 。 说 明 left. html 中 标记 a 的 作用 与 main. html 中 标记 a 的 作用 。 
程序 清单 2-5 : 


<!--top.html--> 

< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.w3.org/TR/xhtmll/DTD/xhtmll- transitional .dtd"> 

«html xmlns- "http: //www.w3.0rg/1999/xhtml"» 

«head» 

«meta http- equiv- "Content- Type" content- "text/html; charset- gb2312"/» 
«title» KPH KR Logo< /title> 

</head> 


<body bgcolor="# 1d1d1f"> 

<img src= "image/solarlogo.jpg" alt=" 太 阳 系 的 logo" width= "216" height="79"/> 
< /body> 

</html> 


程序 清单 2-6: 


<!--left.html--> 
« ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"» 
«html xmlns= "http://www .w3.0rg/1999/xhtml"» 
<head> 
«meta http- equiv= "Content- Type" content= "text/html; charset=gb2312"/> 
«title» 3X ¥i< /title» 
< style type- "text/css"» 
«t-- 
body, td, th { 
color: #FF9900; 
} 
body { 
background- color: #1dldlf; 
) 
a:link ( 
color: #FF9900; 
text-decoration: none; 
} 
a:visited { 
color: #999999; 
text-decoration: none; 
E 
a:hover ( 


text-decoration: none; 
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a:active ( 
text-decoration: none; 

} 

--> 

</style> 

</head> 


<body> 

<p align="center"> 

<a href=" "> Ji « /a» «br/» 

<a href- "main.html# start1"» 7K Œ< /a><br/> 

«a href="main.html# start2"» 4 Æ< /a><br/> 

«a href="main.html# start3"> Jl ER « /a» « br/» 
<a href- "main.htm]# start4"» # Hi « /a><br/> 
«a href="main.html# start5"> K Œ< /a» <br/> 
«a href- "main.html# start6"» + hi < /a» «br/» 

«a href- "main.html# start7"» X E Œ< /a» «br/» 
<a href- "main.html# start8"> ifj E Æ< /a» <br/> 
«a href- "main.html# start9"» & E < /a» 

</p> 

< /body> 

« /html» 


程序 清单 2-7: 


<!--main.html--> 
< ! DOCTYPE html PUBLIC "-//W3C//DID XHTML 1.0 Transitional//EN" "http://www. w3. org/TR/ 
xhtml1/DTD/xhtmll- transitional .dtd"> 
«html xmins= "http: //www.w3.org/1999/xhtm1"> 
<head> 
«meta http- equiv= "Content- Type" content= "text/html; charset=gb2312"/> 
«title» 主页 < /title> 
«style type= "text/css"» 
«t1-- 
.STYLEl (color: 4 FFFFCC) 
p{color:# FF0000} 
a:link { 
color: # FFCCCC; 
text-decoration: none; 
} 
a:visited { 
text-decoration: none; 
color: #FFCC00; 
} 


a:hover { 


text-decoration: none; 
} 
a:active { 
text-decoration: none; 
} 
body, td, th { 
color: #FF0000; 
} 
--» 
</style> 
</head> 
<body bgcolor="# 1d1d1£"> 
<div align="center"> 
<a name= "main"/» 
<img src- "image/sun. jpg" alt=" 太 阳 系 示意 图 " width- "366" height- "166" usemap- "t sun"/> 
«map name- "sun" id="sun"> 
«area shape- "circle" coords- "343, 62,3" alt- "= T Hi " href- "4 start9"/» 
«area shape- "circle" coords- "307,63, 6" alt= "海王 星 "/> 
«area shape- "circle" coords- "263, 64,11" alt- "天 王 星 " href- "4 start8"/» 
«area shape- "circle" coords- "228,63, 7" alt- "lH" href- "4 start7"/» 
«area shape- "circle" coords- "193, 63,14" alt- "木星 " href- "4 start6"/> 
«area shape- "circle" coords- "166, 63, 4" alt- "X Æ" href= "4 start5"/> 
«area shape- "circle" coords="148, 63,5" alt- "Jii ER " href- "4 start4"/» 
«area shape- "circle" coords- "128, 64,6" alt- "金星 " href- "4 start3"/> 
«area shape- "circle" coords- "111,65, 7" alt- "/K Hi " href- "4 start2"/» 
«area shape- "circle" coords="62, 66,32" alt- "太阳 " hre£- "4 start1"/» 
< /map» 
</div> 
<p><a name="start1"> Jk Hi « /a> 
<br/> 水 星 是 太阳 系 中 最 靠近 太阳 的 大 行星 。 距 太阳 的 平均 距离 约 58000000 千 米 。 它 是 太阳 系 大 行 
星 中 最 小 的 ,直径 约 4870 FX. HERE AK. &nbsp; <a href- "E main"»iK [9] « /a> 
«/p» 
«p» 
«a name- "start2"> 金 星 </a><br/> 金 星 在 距离 太阳 1 亿 零 7500000 千 米 的 平均 距离 处 , 沿 近 圆 轨道 
绕 日 公转 。 从 随 着 金星 一 起 绕 日 运行 的 地 球 上 看 ,金星 也 呈现 出 和 月 球 类 似 的 相位 变化 。 从 大 小 和 
质量 来 看 ,金星 和 地 球 差 不 多 。 金 星 的 直径 只 比 地球 小 653 千 米 ,为 12103 千 米 ;金星 的 质量 约 是 地 
BRAY 81$, &nbsp; «a href- "4 main"»iK [Fl « /a» 
</p> 
<p> 
«a name- "start3"» 地 球 </a> <br/> 按 离 太 阳 由 近 及 远 的 次 序 为 第 三 颗 。 它 有 一 个 天 然 卫 
星 一 一 月 球 . 地 球 大 约 有 46 亿 年 的 历史 。 不 管 是 地 球 的 整体 ,还 是 它 的 大 气 海洋 、 地 壳 或 内 部 ,从 形 
成 以 来 就 始终 处 于 不 断 变化 和 运动 之 中 。&nbsp; «a href- "E main" iR [8l « /a> 
«/p» 
«p» 
«a name- "start4"> 火 星 </a><br/> 火 星 是 太阳 系 八 大 行星 之 一 , 按 离 太 阳 由 近 到 远 的 顺序 ,火星 排 
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在 地 球 的 后 面 , 列 为 第 四 。 它 的 平均 直径 为 6790 千 米 , 约 为 地 球 直径 的 一 半 。 它 的 密度 也 比 地 球 小 ， 
为 3.933 克 /立方 厘米 (地 球 为 5.52 克 / 立 方 厘米 )。 火 星 与 太阳 的 平均 距离 为 228000000 千 米 ,环绕 
太阳 一 圈 约 相当 于 地 球 上 的 687 天 。 火 星 上 的 一 天 相当 于 地 球 上 的 24 小 时 37 分 22.6 秒 , 比 地 球 的 
一 天 稍 长 一 点 儿 。&nbsp; «a href- "£ main"» iR [8] « /a> 
</p> 
<p> 
«a name="start5"> 木 星 </a><br/> 木 星 是 太阳 系 八大 行星 中 最 大 的 一 颗 , 按 离 太 阳 由 近 到 远 的 次 
序 , 它 排 第 五 。 木 星 是 夜空 中 最 亮 的 几 颗 星之 一 , 仅 次 于 金星 ,通常 比 火星 亮 ( 除 火星 冲 日 时 以 外 ), 有 
时 比 最 亮 的 恒星 天 狼 星 还 亮 。gnbsp; «a href="#main">iK [nl « /a» 
</p> 
<p> 
«a name="start6"> 土 星 </a><br/> 土 星 是 太阳 系 第 六 颗 。 土 星 在 很 多 方面 像 木 星 ,如 它 与 木星 同 
属于 巨 行 星 , 它 的 体积 是 地 球 的 745 倍 ,质量 是 地 球 的 95.18 倍 。 在 太阳 系 八 大 行星 中 ,土星 的 大 小 
和 质量 仅 次 于 木星 , 占 第 二 位 。 它 像 木 星 一 样 被 色彩 斑 调 的 云 带 所 练 绕 , 并 被 较 多 的 卫星 所 拱 卫 。 它 
由 于 快速 自转 而 呈 扁 球形 。 赤 道 半径 约 为 60000 千 米 。 土 星 的 平均 密度 只 有 0.70 克 /立方 厘米 ,是 
八大 行星 中 密度 最 小 的 。gnbsp; «a href- "£ main"»i [Pl « /a> 
</p> 
<p> 
«a name="start7"> 天 王 星 </a><br/> 天 王 星 的 赤道 半径 约 25000 千 米 。 体 积 约 为 地 球 的 65 信 ,在 
八大 行星 中 仅 次 于 木星 和 土星 。 相 当 于 地 球 质量 的 14.63 倍 。 密 度 较 小 ,每 立方 厘米 只 有 1.24 克 。 因 
此 , 它 虽 然 比 海王 星 大 ,质量 却 只 有 海王 星 质 量 的 85%。 在 太阳 系 八大 行星 中 , 它 的 质量 仅 次 于 木 
星 、 土 星 和 海王 星 , 占 第 四 位 。gnbsp; «a href- "E main"»jR [A] « /a» 
</p> 
<p> 
«a name="start8"> 海 王 星 </a><br/> 海 王 星 按 离 太阳 远近 排 在 第 八 , 它 的 赤道 直径 为 49528 千 米 ， 
质量 是 地 球 的 17 信 ,平均 密度 1.64 克 /立方 厘米 ,体积 是 地 球 的 44 倍 。 它 的 轨道 接近 正 圆 ,平均 距离 
太阳 44.97 亿 千 米 ,是 地 球 到 太阳 距离 的 30 倍 , 绕 太阳 公转 一 周 需 要 164.79 年 。&nbsp; «a href= "4 
main"> 返 回 < /a» 
<p> 
«a name="start9"> 和 冥王 星 </a><br/>1930 年 美国 天 文学 家 汤 博 发 现 冥王 星 ,将 它 定 义 为 大 行星 。 
冥王 星 与 太阳 的 平均 距离 约 为 59 亿 千 米 。 数 十 年 来 ,科学 家 普遍 认为 太阳 系 有 九 大 行星 ,但 随 着 一 
颗 比 冥 王 星 更 大 ,更 远 的 天 体 的 发 现 ,使 得 冥王 星 大 行星 地 位 的 争论 愈演愈烈 。 一 是 由 于 其 发 现 的 
过 程 是 基于 一 个 错误 的 理论 ;二 是 由 于 当初 将 其 质量 估算 错 了 , 误 将 其 纳入 到 了 大 行星 的 行列 。 
此 在 国际 天 文学 联合 会 大 会 上 ,是 否 要 给 里 王 星 "正名 "成 为 了 大 会 的 焦点 ,为 此 ,天 文学 家 给 出 了 各 
种 方案 。 

2006 年 8 月 24 日 ,国际 天 文学 联合 会 第 26 届 大 会 ,经 两 千 余 天 文学 家 表决 通过 一 一 太阳 系 只 有 
八大 行星 。 不 再 将 传统 九 大 行星 之 一 的 冥王 星 视 为 行星 ,而 将 其 列 和 人" 斤 行星 "。 

因为 根据 "保守 新 行星 定义 ": 一 是 必须 围绕 太阳 运转 的 天 体 ;二 是 质量 足够 大 ,能 依靠 自身 引力 
使 天 体 呈 圆 球状 ;三 是 其 轨道 附近 应 该 没有 其 他 物体 。 

冥王 星 对 最 后 一 条 条 件 不 符 , 冥 王 星 的 轨道 是 和 海王 星 有 所 交集 的 。&snbsp; «a href= 
"f main"» i& [Bl « /a> 
</p> 
</body> 
</html> 


« OF x 


练习 2: 设计 并 建设 一 个 自选 主题 的 网 站 。 

自选 主题 (如 个 人 网 站 班级 网 站 .学 院 网 站 、 小 型 花 店 网 站 、 奥 运 宣传 网 站 等 ) ,设计 并 
建立 一 个 网 站 。 要 求 : 按照 2.1. 3 小 节 中 介绍 建设 网 站 的 基本 要 素来 实现 。 网 站 的 素材 自 
行 准备 。 要 求 书写 一 个 设计 报告 ,阐述 建设 网 站 的 设计 方案 。 

操作 步骤 略 。 

练习 3: 了 解 商业 网 站 的 设计 。 

通过 互联 网 络 ,访问 Nokia 中 国 网 站 (http://www. nokia. com. cn), Nokia 香港 网 站 
(http://www. nokia. com. hk) , Nokia 全 球 网 站 (http://www. nokia. com) ,按照 设计 基本 
要 素 ( 客 户 对 象 , 网 站 的 主题 .页 面 结构 、 色 彩 体系 、 文 化 背景 民族 特色 ,设计 风格 等 多 方面 ) 
来 比较 三 个 网 站 首页 界面 设计 的 异同 。 并 访问 中 国 三 星 电 子 网 站 (http://www. samsung. 
com/cn) FH E E F W hi (http://www. samsung. com. hk), 比 较 二 者 的 异同 。 并 对 
Nokia 中 国 网 站 和 三 星 中国 网 站 进行 比较 。 根 据 网 上 调查 的 结果 书写 报告 ,说 明 网 站 开发 
的 基本 要 素 的 作用 ,并 以 Nokia 和 三 星 网 站 的 实例 进行 说 明 。 

操作 步骤 略 。 
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第 3 章 CSS R 


CSS(Cascading Style Sheets. E FEX AO EX Web 页 面 显示 效果 进行 控制 的 一 套 标 
YE. CSS 扩充 了 HTML 标记 的 属性 设 定 , 使 得 页 面 显 示 效 果 更 加 丰富 ,表现 效果 更 加 灵 
活 , 更 具有 动态 性 。 同 时 使 用 CSS 可 以 将 页 面 样式 定义 和 HTML 文件 分 离 ,使 得 页 面 开 发 
及 维护 工作 更 易 进 行 。 


3.1 预备 知识 


3.1.1 CSS 基本 语法 
(D CSS 定义 的 基本 语法 格式 如 下 : 
选择 符 {规则 列表 } 


其 中 选择 符 是 指 要 使 用 该 样式 的 对 象 , 它 可 以 是 一 个 或 多 个 HTML fiit. CLASS 3€ 
择 符 或 ID 选择 符 , 如 果 为 多 个 则 使 用 逗号 ", ”进行 分 隔 。 规 则 列表 是 由 一 个 或 多 个 属性 定 
义 语句 组 成 的 样式 规则 ,各 语句 间 使 用 分 号 ;” 进 行 分 隔 。 属 性 定义 语句 的 语法 格式 为 : 


“属性 名 : 属性 值 ” 


(2) 在 页 面 文件 中 对 CSS 的 定义 有 以 下 几 种 方式 : 

(D 直接 在 页 面 文件 中 使 用 HTML 标记 的 style 属性 。 其 语法 格式 如 下 : 
< 标记 名 style=" 样 式 属性 名 1: 属性 值 1; 

样式 属性 名 2: 属性 值 2; 


m 
@ 在 页 面 文件 中 定义 内 部 样式 表 。 其 语法 格式 如 下 : 


«style type- "text/css" > 
«1-- 
选择 符 1, 选择 符 2, … {样式 属性 名 1: 属性 值 1; 
样式 属性 名 2: 属性 值 2; 
oo} 


--> 
</style> 


@ fe SUI XC AE HK A Sb BPE Se. HARRA F : 


<style type="text/css"> 
<!-- 
@ import url ("外 部 css 样式 表 文 件 名 "); 
2.90. 


--> 
</style> 


@ 链接 外 部 样式 表 。 其 语法 格式 如 下 : 


«link type= "text/css" 


rel="stylesheet" 
href= "Shih css 样式 表 文 件 名 "> 


(3) CSS 的 注释 语句 。CSS 的 注释 语句 是 位 于 */* ”和 “x /标记 之 间 的 语句 内 容 。 
3.1.2 CSS 选择 符 
CSS 选择 符 主要 有 HTML 标记 .CLASS 选择 符 和 ID 选择 符 3 种 。 它 们 的 定义 和 使 用 


方法 见 表 3-1. 
表 3-1 CSS 选择 符 的 定义 和 使 用 
选择 符 语法 格式 样式 使 用 范围 说 明 
HTML 标记 | 定义 语法 : 标记 {…) 在 HTML 文件 中 ,所 有 该 标记 包含 的 文本 都 具 
使 用 语法 : 一 标记 > 有 定义 的 CSS 样式 
— o 在 HTML 文件 中 的 所 有 使 用 该 类 名 的 标记 都 
CLASS 选择 符 | 使 用 语法 :三 标记 classc 264 具有 定义 的 CSS 样式 
定义 语法 :标记 .类 名 {…} 在 HTML 文件 中 的 所 有 指定 该 类 名 的 该 标记 
使 用 语法 :二 标记 class 王 类 名 二 都 具有 定义 的 CSS 样式 
定义 语法 :#ID 名 {…} 在 HTML 文件 中 的 所 有 使 用 该 ID 名 的 标记 都 
使 用 语法 :二 标记 id=ID > 具有 定义 的 CSS 样式 
E 定义 语法 :标记 #ID 名 {…} 在 HTML 文件 中 的 所 有 指定 该 ID 名 的 该 标记 
使 用 语法 :二 标记 id—ID 名 二 都 具有 定义 的 CSS 样式 


注意 ,这 3 种 CSS 选择 符 可 以 混合 使 用 。 除 了 这 3 种 基本 选择 符 外 ,CSS 中 还 提供 了 
伪 类 。 伪 类 是 一 类 特殊 的 选择 符 , 它 和 类 选择 符 不 同 , 不 能 由 用 户 自己 命名 ,而 是 由 CSS 定 
义 , 具 有 特定 含义 。 伪 类 的 基本 语法 如 下 : 

选择 符 名 : WEA {属性 名 : 属性 值 } 


如 定义 a;visited(color; # 3300FF;text-decoration:none;}), 则 表示 在 页 面 中 使 用 超 链 
接 标 记 二 a 二 时 , 当 超 链接 被 访问 过 后 则 将 使 用 该 样式 。 
也 可 以 将 类 选择 符 和 伪 类 混用 ,其 基本 语法 如 下 : 


选择 符 名 .类 名 : 伪 类 名 {属性 名 : 属性 值 } 


PD 


a.red:visited{color:# FF0000;text- decoration:none;] 


要 使 用 该 样式 可 用 下 面 语句 


«a class- red href- "4 ">…<V/a> 
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常用 的 伪 类 见 表 3-2. 
表 3-2 CSS 常见 的 伪 类 


fy 类 说 明 例 
link 表示 动态 链接 的 未 访问 的 链接 状态 a:linked{color:green;} 
错 a TER NY OK visited 表示 动态 链接 的 已 访问 链接 状态 a:visited{ color: red; } 
CABAN a hover 表示 动态 链接 的 鼠标 放 在 链接 上 的 状态 a:hover{ color; blue; } 
active 表示 动态 链接 的 激活 链接 的 状态 a:active{ color: black; ) 
p:first-letter{ 
first-letter CSS 2. 0 定义 的 首 字母 伪 类 ,定义 首 字母 的 样式 font-size; 30px; 
} 
first-line CSS 2. 0 定义 的 首 行 伪 类 ,定义 首 行 的 样式 div; first-line{ font-size; 12px; ) 
注意 : 


COD 和 a 标记 相关 的 伪 类 分 别 表 示 超 链接 在 4 种 不 同 的 状态 下 的 显示 效果 : link( 未 访 
问 过 的 超 链接 )、visited( 已 访问 过 的 超 链接 )、active( 单 击 时 的 超 链接 ) 和 hover( 和 鼠标 停留 在 
超 链接 上 )。 对 于 这 4 个 伪 类 在 定义 时 要 注意 它们 的 顺序 ,要 按照 a: link, a; visited, 
a;hover.a;active 的 顺序 定义 。 

(2) 和 文字 段落 相关 的 两 个 伪 类 分 别 为 first-letter 和 first-line。first-letter 定义 了 第 
一 个 字符 的 状态 ,而 first-line 定义 了 段落 第 一 行 的 状态 。 


3.1.3 样式 表 的 层 到 顺序 


可 以 使 用 CSS 语句 对 HTML 标记 设置 不 同 的 显示 样式 ,但 是 由 于 HTML 标记 在 使 用 
中 常常 有 艇 套 情况 出 现 ,那么 对 于 控制 同一 页 面 内 容 的 嵌 套 标记 ,究竟 哪 一 个 样式 起 作用 ， 
可 以 按照 以 下 规则 进行 判断 。 

(1) 直接 在 页 面 文件 中 使 用 HTML 标记 的 style 属性 定义 的 内 联 样式 优先 级 最 高 。 

(2) 其 他 的 样式 定义 按照 在 页 面 文件 中 出 现 的 顺序 , 越 后 出 现 的 优先 级 越 高 。 

(3) 由 于 id 选择 符 一 般 最 后 定义 ,所 以 id 选择 符 的 优先 级 高 于 class 选择 符 。 

(4) 没有 被 定义 样式 控制 的 内 容 将 使 用 浏览 器 的 默认 样式 。 


3.1.4 CSS 基本 属性 


CSS 的 基本 属性 主要 包括 背景 属性 文本 属性 .字体 属性 .边界 属性 .边框 属性 ` 边 距 属 
性 、 列 表 属 性 和 定位 属性 等 。 
(D CSS 背景 属性 主要 包括 background-color background-image, background-repeat , 


background-attachment 和 background-position 等 。 

(2) CSS 文本 属性 主要 包括 text-indent, text-align, vertical-align, line-height 和 letter- 
spacing 等 。 

(3) CSS 字体 属性 主要 包括 font-family , font-style, font-size, font-weight , font-variant, 


text-decoration 和 text-transform 等 。 
(4) CSS 边界 属性 主要 使 用 margin 属性 来 控制 元 素 边 界 与 网 页 其 他 内 容 的 水 平和 垂 
. 3l * 


直 间 距 , 除 此 以 外 也 可 以 使 用 margin-top, margin-right, margin-bottom 和 margin-left 给 
4 个 边界 单独 设置 具体 属性 值 。 

(5) CSS 边框 属性 主要 有 border、border-style 和 border-color。 

(6) CSS 边 距 属性 主要 使 用 padding 来 设置 元 素 的 内 容 与 元 素 边 框 之 间 的 距离 ,也 可 
以 使 用 padding-top, padding-right, padding-bottom 和 padding-left 分 别 设置 上 , 右 、 下 、 左 4 
个 方向 的 属性 值 。 

(7) CSS 列表 属性 主要 使 用 list-style 来 设置 文字 列表 属性 ,控制 列表 的 符号 和 位 置 ,也 
可 以 通过 list-style-type, list-style-position 和 list-style-image 单独 进行 设 定 。 

(8) CSS 定位 属性 主要 有 top,left, position 和 z-index, 


3.2 实验 3.1 CSS 选择 符 的 使 用 


实验 目的 : 


(1) 掌握 CSS 的 基本 语法 。 
(2) 掌握 CSS 选择 符 的 使 用 方法 。 


实验 内 容 : 

编写 程序 使 用 CSS 的 3 种 选择 符 (HTML PRIE, CLASS 选择 符 和 ID 选择 符 ) 对 
HTML 标记 进行 样式 定义 ,并 观察 程序 运行 结果 。 
实验 步骤 : 

新 建 一 个 HTML 文件 Css. 1. html, 在 其 中 输入 程序 清单 3-1 的 代码 并 保存 。 为 使 程 
序 运行 结果 符合 实验 任务 规定 的 要 求 ,将 程序 中 的 | 代码 了 一 | 找 码 3 引 补 充 完整 ,并 在 浏览 器 
中 查看 程序 运行 结果 是 否 和 图 3-1 一 致 。 


HSE CLASSE Fay fontl Nath CHRR, AGBEHRMIER 


此 处 定义 font 标 记 的 样式 : 蓝 色 隶书 ， 字 体 大 小 为 20pt | 
此 处 使 用 10 选 择 符 myfont2 定 义 p 标 记 的 样式 -| 


图 3-1 实验 3.1 运行 结果 
程序 清单 3-1: 


«1--Css 1.htnl 源 代码 --> 
<html> 
<head> 
<title> 实 验 1 css 选 字符 的 使 用 < /title> 
</head> 


<style type="text/css"> 
* 326 


站 = 
-myfontl{ 
font- style:italic; 
color:red; 
text-decoration :none 
} 
#myfont2{ 
font- family: fk ; 
font- size:l6px; 
letter- spacing:3px 
} 
Sa 
</style> 


<body> 
<center> 
<font [R43 1] >< !-- 定 义 蓝 色 隶书 字体 为 20pt--> 
此 处 定义 font 标记 的 样式 : 蓝 色 隶书 ,字体 大 小 为 20pt 
</font> 
<br> 


<br> 


<a href="www.sohu.com" [Rig 2|>< !-- 定 义 使 用 myfont1--> 

此 处 使 用 CLASS 选择 符 myfont1 定 义 a 标 记 的 样式 , 单 击 链接 到 搜狐 网 主页 
</a> 
<br> 


«p [KB 3]»«!--3E XE myfont2- -» 
此 处 使 用 ID 选择 符 myfont2 定 义 p 标 记 的 样式 


</p> 
</center> 
< /body> 
</html> 
3.3 实验 3.2 制作 菜单 
实验 目的 : 


(1) 进一步 熟悉 CSS 的 基本 语法 。 
(2) 掌握 CSS 的 样式 定义 方法 。 


实验 内 容 : 


编写 CSS 样式 表 制 作出 如 图 所 示 的 菜单 效果 。 当 打开 浏览 器 后 可 见 如 图 3-2 所 示 的 菜 


单 样式 , 当 鼠 标 移 至 不 同 菜单 项 上 时 ,该 菜单 项 的 显示 样式 将 发 生变 化 ,如 当 鼠 标 移 至 "实验 
内 容 * 上 时 ,出 现 如 图 3-3 所 示 效 果 。 
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图 3-2 实验 3. 2 运行 结果 (一 ) 


图 3-3 实验 3. 2 运行 结果 (二 ) 
实验 步骤 : 


新 建 一 个 HTML 文件 Css_2. html, 在 其 中 输入 程序 清单 3-2 的 代码 ,并 将 
处 样式 定义 补充 完整 ,使 得 该 HTML 文件 在 浏览 器 中 显示 如 图 3-2 所 示 


程序 清单 3-2: 


<!--Css_2.html 源 代码 -~-> 
«html» 

<head> 

<title> 菜 单 < /title> 
«style type- "text/css"» 


«1-- 
*( margin:0; 
padding:0; 
border:0; 
} 
body{ 
font- family: arial, #{K, serif; 
font- size:12px; 
} 
#menu{ 
line-height: 26px; 
list- style- type: none; 
} 
#menu af 


display: block; 
width: 80px; 
text-align: center; 


Color:# 000000; 


text- decoration: none; 


#menu a:visited( 
color: # 3300FF; 


text- decoration :none; 


#menu a:hover{ 
color: #FFFFFF; 
text-decoration: none; 


font-weight: bold; 


#menu li( 


ARS BE 1 |< !-- 设 置 菜单 项 --> 


#menu li a:hover( 


ARGS Be 2) < !-- 设 置 鼠 标 放 在 链接 上 的 背景 --> 


) 

SP 
</style> 
</head> 


<body> 
<ul id="menu"> 
«li» 

«a href="#"> i W< /a» 
</li> 
«li» 

<a href="#"> il fe (ij SP « /a» 
</li> 
«li» 

«a href- "4 "» IG R< /a» 
«/li» 
«li» 

«a href=" "> ZU Wi Wi< /a> 
</li> 
«a 

«a href- "$ "» ER 2c </a> 
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«/li» 
«li» 
«a href- "$ "» HX RRI /a> 

«/li» 

</ul> 

< /body> 

</html> 

说 明 : 在 这 个 实验 中 ,注意 到 在 定义 CSS 样式 时 使 用 到 了 上 下 文选 择 符 (contextual 
selector) ,如 本 程序 中 的 并 menu a{display: block; width; 80px; text-align:center;)。 所 谓 
上 下 文选 择 符 是 由 两 个 或 更 多 的 选择 符 组 成 ,这 些 选择 符 之 间 以 空格 隔 开 , 它 的 含义 是 只 有 
当 最 后 一 个 选择 符 ( 如 上 例 中 的 “a”) 是 第 一 个 选择 符 ( 如 上 例 中 的 ID 选择 符 menu) 的 直接 
后 代 时 该 样式 才 起 作用 。 


3.4 实验 3.3 使 用 CSS 样式 设置 页 面 布局 


实验 目的 : 


(1) 熟悉 运用 CSS 统一 站 点 风格 的 技巧 。 
(2) 了 解 如 何 使 用 CSS 美化 页 面 布局 。 


实验 内 容 : 


设计 CSS 样式 表 将 已 有 的 HTML 页 面 (未 使 用 CSS 样式 的 HTML 文件 ,运行 效果 如 
图 3-4 所 示 ) 按 照 图 3-5 的 效果 布局 并 显示 。 


《Web 程 序 设计 》 课 程 教学 网 


课程 简介 
本 课程 的 先 修 课程 是 计算 机 基础 、 高 级 语言 计算 机 网 络 。 通 过 对 本 课程 的 教学 ， 使 学 生 了 解 Web 应 用 程 
序 的 开发 技术 ， 包 括 Intermet 基 础 知识 、 脚 本 语言 ， 静 态 页 面 和 动态 页 面 的 设计 以 及 服务 器 端 程序 的 编制 和 
炒 据 库 的 应 用 ， 当 所 六 豆 式 Web 系统 光 设计 方法 ， 能 小 习 较 复杂 的 交互 式 系统 原 代 码 ， 并 且 能 应 用 所 学 知 
识 开 发 建设 小 型 的 网 站 。 

ESTE 

实验 内 容 

在 学 习 《Web 程 序 设计 》 课程 的 基础 上 ， 通过 实 驻 来 提高 学 生 对 所 学 知识 的 了 解 和 程序 开发 能 力 。 本 课程 
实验 内 容 从 应 用 和 实践 角度 出 发 ， 结 合 相关 教学 内 容 ， 帮 助 脚本 语言 、CSS 基 本 
SER, SPREE AULA, 有 
ES 
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图 3-4 未 使 用 样式 表 文 件 的 Css_3. html 运行 结果 
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F "r 本 课程 的 先 修 课 程 是 计算 机 基础 、 高 级 语言 、 计 算 机 网 络 。 通 过 对 本 课程 的 教 
学 ， 使 学 生 了 解 qeb 应 用 程序 的 开发 技术 ， 包 括 Internet 基 础 知识 、 著 本 语言 ， 静 态 
课程 简介 页 面 和 动态 页 面 的 设计 以 及 服务 器 端 程序 的 编制 和 数据 库 的 应 用 ， 拿 提交 互 式 yeb 系 
统 的 设计 方法 ， 能 读 慢 较 复杂 的 交互 式 系 统 原 代码 ， 并 且 能 应 用 所 学 知识 开发 建设 小 
型 的 网 站 。 
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rs 在 学 习 《web 程 序 设计 》 课 程 的 基础 上 ， 通 过 实验 来 提高 学 生 对 所 学 知识 的 了 解 
和 程序 开发 能 力 。 本 课程 实验 内 容 从 应 用 和 实践 角度 出 发 ， 结 合 相关 教学 风 容 ， 帮 助 
实验 内 容 学 生 岗 悉 HDIL 基 本 标记 、 脚 本 洛 言 、CSS 基 本 技术 、JSP 基 本 活 法 和 数据 库 编程 等 知识 

点 。 实 验 内 容 可 基本 分 为 客户 端 程序 开发 和 服务 器 端 程序 开发 两 部 分 。 
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图 3-5 使 用 样式 表 文 件 Css_3. ess 后 的 Css_3. html 应 达到 的 效果 


实验 步骤 : 


CD 新 建 Css_3. html 文件 ,在 其 中 输入 程序 清单 3-3 所 示 的 代码 。 
程序 清单 33. 


<!--Css_3.html 源 代码 --> 
<html> 
<head> 
<title>css KM 3< /title> 
</head> 


<body> 
<div> 
<hl>《Web 程 序 设 计 》 课 程 教学 网 < /hl> 
«ul» 
«li» 
«a href="#"> Ñ Ji « /a» 
</li> 
«li» 
«a href= 哇 "> 课程 简介 < /a» 
«/li» 
«li» 
<a href=" "» KK V AE « /a> 
«/li» 
«li» 
<a href=" "> ZUT VE /a> 
</li> 
«li» 
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<a href- "$ "» fE£E 2c Wi « /a> 
«/li» 
xa. 
«a href=" ">I A HK fi] < /a> 
</li> 
«/ul» 
« /div» 


«div» 
«div» 

<h3> 课 程 简介 < /h3> 
</div> 


<div> 

<p> 
本 课程 的 先 修 课程 是 计算 机 基础 .高 级 语言 .计算 机 网 络 。 通 过 对 本 课程 的 教学 ,使 学 
^E T fit. Web 应 用 程序 的 开发 技术 ,包括 Internet 基础 知识 .脚本 语言 ,静态 页 面 和 动态 页 面 
的 设计 以 及 服务 器 端 程序 的 编制 和 数据 库 的 应 用 ;掌握 交互 式 Web 系统 的 设计 方法 ;能 读 懂 
较 复杂 的 交互 式 系统 源 代码 ,并 且 能 应 用 所 学 知识 开发 建设 小 型 的 网 站 。 
</p> 
<p><a href- "4 "» » » FFAN A< /a>< /p> 
</div> 
</div> 


<div> 
<div> 
<h3> 实 验 内 容 </h3> 
« /div» 
«div» 
«p» 
在 学 习 (Web 程序 设计 课程 的 基础 上 ,通过 实验 来 提高 学 生 对 所 学 知识 的 了 解 和 程序 开 
发 能 力 。 本 课程 实验 内 容 从 应 用 和 实践 角度 出 发 ,结合 相关 教学 内 容 , 帮 助 学 生 熟悉 HTM 基 
本 标记 、 脚 本 语言 .Css 基本 技术 、JSP 基本 语法 和 数据 库 编程 等 知识 点 。 实 验 内 容 可 基本 分 为 
客户 端 程序 开发 和 服务 器 端 程序 开发 两 部 分 。 
</p> 
<p><a href- "4 ">>> FEHN R< /a» « /p> 
</div> 
</div> 


<div> 
<p>E-mail: ******@ *** .com< /p> 
<P>*xxxxx 大 学 计算 机 系 (Web 程序 设 计 ) 教 学 小 组 @ 2008< /p> 
</div> 
< /body» 
</html> 
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(2) 在 同一 目录 下 新 建 Css_3. ess 文件 ,该 文件 的 功能 是 对 Css, 3. html 文件 进行 样式 
定义 。 将 Css_3. ess 文件 链接 到 Css_3. html 中 ,使 得 Css_3. html 中 的 HTML 标记 使 用 所 
定义 的 样式 达到 图 3-5 所 示 效 果 。 请 大 家 按 要 求 完 成 Css_3. css 文件 代码 的 编写 ,并 在 程序 
清单 3-3 的 代码 中 添加 样式 使 其 在 浏览 器 中 运行 得 到 图 3-5 效果 。 

说 明 : 本 实验 中 对 HTML 页 面 的 设计 中 使 用 了 很 多 div 标记 , 它 将 页 面 的 内 容 分 割 成 
不 同 部 分 ,这 样 可 以 方便 地 对 每 一 部 分 内 容 进 行 样式 定义 。 可 以 使 用 二 div id="IdSelector 
_name" > Xi, <div class— "ClassSelector name" 记 来 将 已 经 定义 好 的 样式 用 于 div 标记 所 包 
含 的 区 域 中 。 
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第 4 章 客户 端 脚本 语言 


应 用 于 客户 端 Web 程序 设计 的 脚本 语言 弥补 了 HTML 语言 的 不 足 , 大 大 增强 了 客户 
端 Web 页 面 的 动态 性 和 交互 性 。JavaScript 是 目前 较为 常用 的 脚本 语言 , 它 既 可 以 用 于 客 
Pi Web 程序 开发 ,也 可 以 用 于 服务 器 端 Web 程序 开发 ,是 一 种 嵌入 HTML 的 脚本 语言 ， 
它 不 需要 编译 ,在 客户 端 可 以 通过 浏览 器 解释 执行 。 


4.1 预备 知识 


4.1.1 JavaScript 基本 语法 


(1) 将 JavaScript 代码 能 入 HTML 文件 的 方法 有 两 种 。 
(D 直接 在 HTML 文件 中 使 用 HTML 中 的 过 script 二 … 达 /script 二 标记 。 其 描述 形式 如 下 、: 


< script language- "JavaScript"» 
JavaScript 语句 段 
« /script» 


«script type- "text/javaScript"» 

JavaScript 语句 段 

</script> 

@ 将 JavaScript 程序 代码 和 HTML 文件 分 别 编写 ,并 将 JavaScript 程序 代码 以 扩展 
名 .js 保存 ,然后 在 HTML 文件 中 通过 王 script 二 标记 将 指定 的 JavaScript 文件 导入 进来 。 
其 描述 形式 如 下 : 


«script src- "JavaScript 文件 路 径 "> 


(2) JavaScript 区 分 大 小 写 。 

(3) JavaScript 中 使 用 换行 符 作 为 一 条 语句 的 结束 标志 。 如 果 需 要 将 几 条 语句 放 在 同 
一 行书 写 ,可 以 在 各 条 语句 间 使 用 分 号 (; ) 进 行 分 隔 。 

(4) JavaScript 中 注释 语句 的 描述 形式 有 两 种 ,可 以 使 用 “//” 或 “/x*… ox I" de 
JavaScript 的 注释 语句 。 


4.1.2 JavaScript 常见 的 数据 类 型 


JavaScript 提供 了 4 种 基本 的 数据 类 型 ,分 别 是 数值 型 .字符 串 型 .布尔 型 和 空 值 。 
(1) 数值 型 数据 包括 整数 和 浮 点 数 。 
(2) 字符 型 数据 是 用 双 引 号 ("") 括 起 来 的 字符 串 或 单 引号 (' ) 括 起 来 的 字符 。 
(3) 布尔 型 数据 可 以 取 true 和 false 两 个 值 。 
(4) 空 值 null。 

s d.c 


1. 变量 

CD 命名 规则 。JavaScript 中 变量 名 必须 是 以 字母 或 下 划 线 (_) 开 头 , 由 字母 .数字 和 下 
划 线 共同 组 成 的 字符 串 。 

(2) 声明 方法 。 在 JavaScript 中 变量 的 声明 方法 有 两 种 。 

(D 使 用 关键 字 var 声明 变量 。 描 述 形式 如 下 : 

var 变量 名 


var 变量 名 = 变量 值 

© 不 使 用 关键 字 var ,直接 使 用 赋值 语句 声明 变量 。 描 述 形式 如 下 : 

变量 名 = 变量 值 

(3) 作用 域 。JavaScript 中 变量 也 可 以 分 为 全 局 变量 和 局 部 变量 两 类 。 全 局 变量 定义 
在 所 有 函数 体外 ,对 任何 函数 可 见 ; 局 部 变量 是 定义 在 某 一 函数 体内 ,只 对 该 函数 可 见 。 

2. 常量 

JavaScript 中 常量 可 以 是 整 型 ,布尔 型 .字符 型 等 ,如 123、21. 34、"this is an apple" 等 。 


4.1.4 运算 符 


JavaScript 中 运算 符 可 以 分 为 赋值 运算 符 、 算 数 运算 符 、 逮 辑 运算 符 LOS ROB SETTE LETT 
串 运算 符 和 位 运算 符 6 类 ,具体 见 表 4-1。 
表 4-1 JavaScript BAAR 


赋值 运算 符 +=, .*=,/=A% 

算数 运算 符 丰 、 一 (三 元 运算 )、#、/s%: 十 十 ,一 一 和 一 (一 元 运算 》 
逻辑 运算 符 &.8-, || Al! 

关系 运算 符 w= >.>=.< H< 

字符 串 运 算 符 十 

位 运算 符 和 |、 一 人 天 二 和 > 二 


4.1.5 对 象 和 数组 


1. WR 
JavaScript 中 对 象 包含 属性 和 方法 两 部 分 。 属 性 就 是 对 象 的 物理 信息 的 描述 ,而 方法 
指 该 对 象 可 以 进行 的 操作 。 要 使 用 对 象 ,必须 确保 该 对 象 已 经 存在 。 对 对 象 中 属性 的 访问 
可 以 通过 “对 象 名 . 属性 名 ”的 方式 进行 ,同样 ,要 调用 对 象 中 定义 好 的 方法 可 以 通过 “对 象 
名 .方法 名 ”的 形式 实现 。 
在 JavaScript 中 要 自 定义 对 象 ,可 以 使 用 关键 字 function 来 声明 。 其 语法 形式 如 下 : 
. 4] 。 


function 对 象 名 (属性 列表 ){ 
this. 属 性 = 参数 1 
this. 属 性 2= 参 数 2 


this. 方 法 1= 函 数 1 
this .方法 2= 函 数 2 


k 

2. 数组 对 象 

在 JavaScript 中 ,可 以 通过 使 用 其 内 置 对 象 Array 来 创建 数组 对 象 。 创 建 具 体 数组 对 
象 实例 的 方法 如 下 : 


var 数 组 名 =new Array() 
或 
var 数 组 名 =new Rrray( 数 组 长 度 ) 


Array 对 象 常用 的 属性 有 length, 用 来 描述 数组 的 长 度 ;常用 的 方法 有 join() 、reverse() 和 
sort() 方 法 。 


4.1.6 函数 


1, 函数 定义 
在 JavaScript 中 函数 的 定义 要 使 用 关键 字 function ,其 基本 的 语法 形式 如 下 s 


function 因数 名 (参数 1, 参数 2，…， 参数 m{ 
函数 体 语句 段 
return 表达 式 
} 
2. 函数 调用 
定义 了 函数 后 就 可 以 调用 该 函数 执行 已 经 定义 好 的 操作 。 函 数 的 调用 方法 很 简单 ,只 
需要 给 出 已 定义 的 函数 名 和 要 传递 到 函数 中 的 参数 值 就 可 以 。 


4.1.7 JavaScript 的 控制 流程 


1. 条 件 语句 if-else 

条 件 语句 的 基本 结构 有 if if-else BLUE if-else 多 分 支 语句 和 switch…case 语句 。 

2. 循环 语句 

JavaScript 中 的 循环 语句 有 for 语句 、while 语句 、do…while 语句 .for…in 语句 和 with 
语句 等 。 其 中 forein 语句 用 来 对 已 知 对 象 的 所 有 属性 进行 循环 操作 的 循环 语句 , 它 不 需要 
使 用 计数 器 来 控制 循环 次 数 ,也 无 须知 道 对 象 的 属性 个 数 就 可 以 进行 相关 操作 。 


4.1.8 JavaScript 的 事件 处 理 


JavaScript 具有 事件 驱动 的 特点 。JavaScript 中 的 事件 可 以 理解 为 用 户 和 Web 页面 
«d» 


的 交互 操作 ,通常 是 由 鼠标 或 热 键 的 动作 引发 。 对 事件 进行 处 理 的 函数 称 为 事件 处 理 
程序 (event handler) 或 事件 处 理 方 法 。 由 于 客户 端 JavaScript ii 4$ Je ie BE HTML X 
件 中 ,所 以 其 事件 处 理 一 般 会 将 HTML 页 面 的 具体 元 素 和 定义 好 的 事件 处 理 方法 关 
联 起 来 。 


4.1.9 JavaScript 的 内 置 对 象 


JavaScript 常用 的 内 置 对 象 有 Array、String、Math 和 Date 对 象 等 。 其 中 String 对 象 是 
针对 字符 串 的 操作 定义 的 对 象 ,Math 对 象 是 针对 常数 和 数学 运算 定义 的 对 象 ,Date 对 象 是 
针对 日 期 和 时 间 操 作 定 义 的 对 象 。 


4.2 实验 4.1 简易 计算 器 
实验 目的 : 


(1) 熟悉 JavaScript 的 基本 语法 。 

(2) 掌握 JavaScript 函数 的 定义 和 使 用 。 
实验 内 容 : 

使 用 JavaScript 编写 程序 实现 计算 器 功能 ,可 以 实现 浮 点 数 的 加 \ 减 、 乘 、 除 运算 。 
实验 步骤 : 


新 建 一 个 HTML 文件 JS_1. html, 在 其 中 输入 程序 清单 4-1 的 代码 并 保存 。 运 行 该 程 
序 将 在 浏览 器 中 显示 如 图 4-1 所 示 页 面 ,在 其 中 单 击 按钮 输入 “3.5 十 2. 8”, 则 显示 如 图 4-2 
所 示 页 面 , 再 单 击 “ 王 ”, 则 将 显示 如 图 4-3 所 示 结 果 。 单 击 按钮 *C”, 则 清除 输入 文本 框 中 之 
前 输入 的 所 有 数据 。 为 使 程序 运行 结果 符合 实验 任务 规定 的 要 求 ,将 程序 中 的 | 伐 码 也 ~ 


代码 3| 补 充 完整 。 


简单 计算 器 

六 
四 | a a 
3 |_s Jj s 
z [5j s 
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图 4-1 实验 4.1 和 运行 效果 (一 ) 
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图 4-3 实验 4.2 运行 效果 (三 ) 


程序 清单 4-1: 


«1--98 1.html 源 代 码 --> 


<html> 
<head> < title» f fii] TE at < /title> 
<script language- "JavaScript"> 
zise 

function SetExp (str) { 

// 设 置 文本 框 内 显示 的 字符 串 

代码 1 


} 
function Cal () { 

// 计 算 输入 的 算术 表达 式 并 在 文本 框 内 给 出 结果 
代码 2 


function Clear()( 
// 清 空 文本 框 内 的 输入 字符 串 
代码 3 
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a> 
</script> 
</head> 
<body> 
<center> 
<h2> 简 单 计算 器 < /n2» 
« form name- Nform method- get» 
<table border- "1" bordercolor- "4 003300"> 
<tr> 
<td colspan= "3"> 
<input type= text name= "result"» 
</td> 
</tr> 
<tr align="center"> 
«td» 


«input type- "button" value- "1" onClick- "SetExp ('1')"» 


</td> 
«td» 


«input type- "button" value- "2" onClick- "SetExp ('2')"» 


</td> 
«td» 


<input type="button" value- "3" onClick- "SetExp ('3')"» 


</td> 

</tr> 

<tr align="center"> 
«td» 


«input type="button" value- "4" onClick- "SetExp ('4')"» 


« /td» 
«td» 


«input type="button" value- "5" onClick= "SetExp ('5')"» 


</td> 
«td» 


<input type="button" value- "6" onClick- "SetExp ('6')"» 


</td> 

</tr> 

<tr align="center"> 
«td» 


«input type="button" value- "7" onClick- "SetExp ('7')"» 


«/td» 
«td» 


«input type="button" value- "8" onClick- "SetExp('8")"> 


«/td» 
«td» 


«input type="button" value- "9" onClick- "SetExp ('9') "> 


«/td» 
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</tr> 
<tr align="center"> 
«td» 
«input type="button" value- "0" onClick- "SetExp('0")"> 
«/td» 
«td» 
«input type="button" value="." onClick- "SetExp('.')"» 
«/td» 
«td» 
«input type="button" value- "C" onClick- "Clear () "> 
</td> 
</tr> 
<tr align="center"> 
«td» 
«input type="button" value="+" onClick- "SetExp ('+ ')"» 
</td> 
«td» 
«input type="button" value-"- " onClick= "SetExp('- ') "> 
</td> 
«td» 
«input type="button" value-" * " onClick- "SetExp(' * ')"> 
</td> 
</tr> 
<tr align="center"> 
<td> 
«input type="button" value="/" onClick- "SetExp('/')"» 
</td> 
«td colspan="2"> 
«input type="button" value="=" onClick- "Cal ()"> 
</td> 
</tr> 
</table> 
</form> 
</center> 
< /body> 
</html> 


思考 : 本 实验 中 按钮 *C” 的 功能 是 清除 文本 框 内 输入 的 所 有 字符 ,如 果 需 再 添加 一 个 按 
钮 “Backspace”, 可 以 每 单 击 该 按钮 一 次 只 清除 在 文本 框 内 最 近 输 入 的 一 个 符号 ,如 在 文本 
框 内 已 输入 “3.52”, 单 击 Backspace, 则 文本 框 内 显示 字符 串 变 成 “3. 5”, 该 按钮 功能 应 该 如 
何 实现 ? 


4.3 实验 4.2 鼠标 跟踪 


实验 目的 : 


(1) 进一步 掌握 JavaScript 的 基本 语法 和 JavaScript 函数 的 定义 和 使 用 。 
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(2) 熟悉 JavaScript 的 事件 处 理 。 
实验 内 容 : 

使 用 JavaScript 编写 程序 实现 一 行文 字 跟 随 鼠标 移动 的 效果 。 
LMR: 


新 建 一 个 HTML 文件 JS 2. html, 在 其 中 输入 程序 清单 4-2 的 代码 并 保存 。 为 使 程序 
运行 结果 符合 实验 任务 规定 的 要 求 ,将 程序 中 的 | 伐 码 囊 一 | 代码 引 补充 完 整 。 
程序 清单 4-2: 


<!--JS_2.html 源 代码 --> 


<html> 
<head> 
<title> 鼠 标 跟 踪 < /title» 
<STYLE type= text/css> 
-mystyle (COLOR:red; 
FONT- FAMILY: 宋体 ; 
FONT- SIZE: 20pt; 
POSITION:absolute; 
TOP:100px; 
WIDTH:200px; 
Z- INDEX:50; 
VISIBILITY: visible 
) 
« /STYLE» 
<script language- "JavaScript"» 
<t== 
var X,y; 


var flag=0; 


function MouseMove () { 

x= document .body.scrollLeft+ event .clientx; 
// 获 取 当 前 鼠标 位 置 的 X 坐 标 

y= document .body.scrollTop*event.clientY; 
// 获 取 当 前 鼠标 位 置 的 了 坐标 

flag-1; 


function SetPos (){ 
it ( (ARS 1p 
// 当 鼠标 移动 时 ,重新 设置 图 层 位 置 


> AT x 


divl.style.posLeft- x20; 
// 设 置 图 层 位置 的 X 坐 标 
divl.style.posTop- y; 

// 设 置 图 层 位 置 的 了 坐标 

} 

代码 2 
// 每 100ms 刷新 一 次 图 层 位 置 坐标 
} 


--» 
</script> 
< /nead> 


<body onLoad=" | fi 3| " onmousemove- " (Røg 4| "> 


«div id= "divl" class= "Rig 5|" 
鼠标 跟踪 演示 

</div> 

< /body> 

</html> 


思考 : 本 实验 中 实现 了 文字 跟随 鼠标 移动 的 效果 ,如 果 需 要 实现 图 片 跟 随和 鼠标 移动 应 
该 将 程序 如 何 进行 修改 ? 


4.4 实验 4.3 JavaScript 控制 CSS 


实验 目的 : 
(1) 进一步 掌握 和 运用 JavaScript 开发 动态 网 页 。 
(2) 了 解 JavaScript 控制 CSS RK. 
实验 内 容 : 


本 次 已 知 有 3 个 CSS 样式 表 文 件 ,分 别 规定 显示 网 页 段落 的 文字 的 尺寸 的 样式 为 
small,media 和 large。 要 求 定 义 一 个 JavaScript 文件 控制 这 些 样式 文件 ,使 得 网 页 为 用 户 
提供 变换 网 页 内 文字 的 大 小 的 功能 。 


实验 步骤 : 


已 知 网 页 demo. html( 代 码 见 程序 清单 4-3) ,是 一 个 显示 介绍 JavaScript 页 面 , 另 定义 
“大 ”“ 中 ”和 “小 ”按钮 ,用 户 可 以 单 击 按钮 达到 修改 文字 大 小 的 功能 。 其 中 3 CSS 样式 
表 文 件 的 small. css, media. css 和 large. css: 分 别 定 义 文字 的 样式 为 small, media 和 large. 
它们 的 源 代码 分 别 见 程序 清单 4-4 ,程序 清单 4-5 ,程序 清单 4-6。 网 页 3 个 按钮 的 控制 是 调 


用 change. js 的 相关 函数 实现 的 。 请 将 程序 清单 4-7 中 的 change. js 程序 的 | 代码 了 一 
代码 3| 补 充 完整 ,实现 修改 网 页 文字 大 小 的 功能 。 具 体 的 运行 结果 见 图 4-4 和 图 4-5。 
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JavaScript 


字体 JE ES 


JavaScript 是 目前 较为 常用 的 脚本 语言 ， 它 既 可 以 
用 于 客户 端 Web 程序 开发 ， 也 可 以 用 于 服务 器 端 
Web 程序 开发 ， 是 一 种 嵌入 HTML 的 脚本 语言 ， 

它 不 需要 编译 ， 在 客户 端 可 以 通过 浏览 器 解释 执 


图 


图 4-4 修改 样式 后 的 显示 大 号 字 效果 
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JavaScript 


字体 DEA 


JavaScript 是 目前 较为 常用 的 脚本 语言 ， 它 既 可 以 用 于 客户 端 Web 程 
序 开发 ， 也 可 以 用 于 服务 器 铀 Web 程 序 开发 ， 是 一 种 嵌入 HTML 的 
脚本 语言 ， 它 不 般 要 编译 ， 在 客户 端 可 以 通过 浏览 器 解释 执行 。 


FEES 
Kd 4-5 修改 样式 后 的 显示 小 号 字 效 果 
程序 清单 4-3: 


< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtmll/DTD/xhtmll- transitional .dtd"> 
«html xmlns= "http://www.w3.0rg/1999/xhtml"» 

«!- -demo.html- -> 


«head» 
«meta http- equiv- "Content- Type" content- "text/html; charset=utf- 8"/» 
«link href- "medium.css" rel="stylesheet" type="text/css" id- "cssfile"/» 
<!-- 导 入 默认 的 medium.css--> 
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<script language- "JavaScript" src= "change.js" type- "text/javascript"/» 
<!--A change.js--> 

«title» Javascript 控制 css 样式 < /title» 

</head> 


<body> 

<div> 

«hl» Javascript« /hl> <br/> 

<div id= "button"> 字 体 
«input id="button0" type="button" value= "小 "/> 
<!-- 定 义 文 字 大 小 控制 按钮 --> 
«input id= "buttonl" type="button" value= "中 "/> 
<!-- 定 义 文 字 大 小 控制 按钮 --> 
«input id="button2" type="button" value- "大 "/> 
<!-- 定 义 文字 大 小 控制 按钮 --> 

</div> 

</div> 


<div id="paragraph"> 

<p> 

JavaScript 是 目前 较为 常用 的 脚本 语言 , 它 既 可 以 用 于 客户 端 web 程序 开发 ,也 可 以 用 于 服务 器 端 
Web 程序 开发 ,是 一 种 嵌入 HTML 的 脚本 语言 , 它 不 需要 编译 ,在 客户 端 可 以 通过 浏览 器 解释 执行 。 
</p> 

</div> 

< /body> 

« /html» 


程序 清单 4-4: 


/* small.css* / 
pí 
font-size: small; 


} 
程序 清单 4-5: 


/ * medium.css * / 
Pt 

font- size:medium; 
) 


程序 清单 4-6: 
/ * large.css* / 


pt 


font- size:large; 
} 
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程序 清单 4-7: 
//change.js 


var button- (); 
// 定 义 button 对 象 ; 
button.addEvent= function () ( 
/ [^ X button 对 象 的 添加 事件 函数 
var buttons- document .getElementById ("button") .getElementsByTagName ("input"); 
// 获 取 所 有 的 按钮 
for (i-0; FRM 1] ie )( 
// 为 所 有 的 按钮 定义 单 击 事件 的 处 理 函数 
buttons [i].onclick- function () { 
button.setSize (this.id.substring (6) ); 
// 调 用 设置 文字 大 小 
NH 


} 
button.setSize=| {Aig 2| ( 
// 修 改 文 本 的 样式 
if(style==0) 
document . getElementById ("cssfile") .href="small.css"; 


else if (style==1) 
document .getElementById ("cssfile") .href="medium.css"; 
else 
document .getElementById ("cssfile") .href- "large.css"; 
) 
window.onload- function () { 
代码 3 
// 加 载 并 调用 button 对 象 的 addEvent PR BK 
) 


思考 :如 果 有 一 个 已 知 HTML 文件 以 及 定义 不 同 的 CSS 样式 文件 ,请 考虑 如 何 实现 用 
户 可 以 根据 实际 要 求 加 载 不 同 的 CSS 样式 。 
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$598 可 扩展 标记 语言 XML 


XML 作为 一 种 半 结 构 化 的 语言 ,继承 了 结构 语言 具有 良好 数据 表示 能 力 的 特点 。 由 
于 单纯 的 XML 语言 并 没有 实际 意义 ,XML 往往 与 其 他 技术 相 结 合 , 开 发 具有 现实 意义 的 
应 用 。 本 章 将 侧重 于 XML 的 客户 端的 应 用 ,设计 相关 的 实验 ,帮助 用 户 了 解 XML 以 及 相 
关 技 术 的 应 用 ,并 为 XML 在 后 续 服务 器 端的 应 用 做 一 个 铺垫 。 


5.1 预备 知识 


5.1.1 XML 标记 语言 基础 


XML 是 可 扩展 标记 语言 (extensible markup language) 的 简称 ,是 一 种 半 结 构 化 的 语 
言 。 一 方面 ,XML 语言 与 SGML(standard generalized markup language) 语 言 一 致 ,只 定义 
数据 内 容 , 不 具有 任何 处 理 数据 的 过 程 。 处 理 和 显示 XML 数据 是 通过 其 他 技术 来 实现 的 。 
这 样 的 一 种 定义 形式 ,导致 了 XML 语言 具有 扩展 性 、 灵 活性 、 自 描述 性 和 简单 性 ,适应 当前 
网 络 应 用 的 要 求 。 因 此 ,XML 得 到 了 广泛 的 支持 和 应 用 。 

1. XML 文件 结构 

XML 文件 书写 形式 简单 ,XML 文件 由 数字 、 任 何 字 符 构 成 ,任何 文本 编辑 器 就 可 以 定 
义 , 只 要 保存 文件 为 .XML 或. xml 后 级 即 可 。 一 般 来 说 ,一 个 XML 文件 从 人 逻辑 结构 可 以 
分 成 处 理 指 令 、 文 件 声明 标记、 实体 引用 、 注 释 和 CDATA 片段 6 个 部 分 。 

C1) 处 理 指令 。XML 文件 的 处 理 指令 必须 放置 在 XML 头 部 ,向 应 用 程序 传递 的 特殊 
指令 。 处 理 指令 形 如 “二 ?处理 指 令 ? 二 ”, 指 令 常见 下 列 两 种 情况 。 

(D <?xml? 之 处 理 指令 。 表 示 定 义 一 个 XML 文件 ,必须 放置 在 XML 文件 的 第 一 
行 的 位 置 ,通知 应 用 程序 对 该 文件 按照 XML 文件 处 理 , 该 处 理 指令 包含 的 常见 属性 见 
表 5-1。 


表 5-1 一 ?xml? 二 指令 的 常见 属性 


属 性 类 别 说 明 
version 必 选 说 明 XML 的 版 本 
encoding 可 选 指定 XML 采用 的 字符 集 
standalone 可 选 指定 XML 是 否 可 使 用 外 部 的 DTD 


@ <?xml-stylesheet? 过 处理 指 令 。 表 示 按 照 指定 的 样式 表 处 理 XML 文件 。 该 指令 
具有 常见 的 属性 见 表 5-2. 

(2) 文件 声明 。XML 文件 是 通过 DOCTYPE 声明 文件 的 使 用 空间 ,通过 内 部 定义 或 
引入 外 部 的 文件 (如 DTD 文档 类 型 定义 文件 ) ,限定 XML 文件 使 用 的 文法 。DOCTYPE 往 
往 要 说 明 根 元 素 和 文档 。 具 体 的 定义 形式 有 如 下 。 
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X 5-2 <?xmbstylesheet? 二 的 常见 属性 


属 性 类 别 说 明 

type 必 选 指定 样式 表 的 类 型 ,例如 可 以 是 text/css 

href 必 选 指定 要 显示 处 理 的 样式 表 文 件 

title 可 选 值 为 字符 串 ,表示 链接 文档 指定 的 标题 

charset 可 选 定义 目标 URL 的 字符 编码 方式 

alternate 可 选 说 明 样 式 表 是 否 是 可 替换 的 样式 表 。 如 果 值 为 yes, 则 样式 表 只 能 在 

用 户 要 求 才 能 加 载 ; 如 果 值 为 no 表示 样式 表 为 默认 加 载 的 样式 表 

media 可 选 说 明 样 式 表 适用 的 媒体 环境 , 取 值 见 表 5-3 


表 5-3 <?xmbstylesheet? 二 指令 的 media 属性 的 取 值 


值 说 明 值 说 WH 
aural 声音 屏幕 braille 盲文 屏幕 
handheld 小 型 设备 print 纸张 
projection 投影 到 大 屏幕 tty 定 宽 的 终端 
tv WebTV screen 显示 器 


O 内 部 声明 ,用 DOCTYPE 元 素 中 直接 内 内 文件 声明 , 形 如 : 


< ! DOCTYPE 根 元 素 [ 
内 部 声明 
]> 
@ 结合 内 部 和 外 部 声明 , 即 可 用 DOCTYPE 元 素 引 入 说 明文 件 类 型 的 外 部 文件 ,也 可 
以 在 声明 内 部 直接 指定 文件 声明 ,有 下 列 两 种 形式 。 
< ! DOCTYPE 根 元 素 SYSTEM" 外 部 DTD 文 件 "[ 
内 部 声明 


]> 


< ! DOCTYPE 根 元 素 PUBLIC" 公 共 标 记 " "外 部 文件 URL" [ 
内 部 文件 声明 

]> 

(3) brid. XML 不 像 XHTML 一 样 有 预先 定义 的 标记 ,XML 的 标记 是 由 用 户 自 定义 
产生 的 。 但 是 即便 如 此 ,XML 的 标记 必须 遵循 一 定 的 规则 。 

(D XML 的 标记 区 分 大 小 写 。 

© 标记 组 成 XML 元 素 ,XML 元 素 必须 用 标记 进行 封闭 。 非 空 的 元 素 是 用 成 对 的 形 
如 "到 标记 >PCDATA 段 二 /标记 记 ”; 空 元 素 必须 用 空格 和 “/” 说 明 , 形 如 过 标记 /之 。 

O XML 文件 中 必须 有 一 个 根 元 素 。 

@ XML 标记 可 有 属性 ,但 属性 值 必须 通过 双 引 号 包含 起 来 。 

© XML 元 素 必须 正确 的 嵌 套 。 元 素 必须 被 其 父 元 素 完全 包含 。 

XML 文件 实际 上 就 是 一 个 倒置 的 XML 树 。 如 果菜 元 素 包含 其 他 元 素 , 则 某 元 素 就 
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是 其 他 元 素 的 父 结 点 ,而 其 他 元 素 就 是 某 元 素 的 子 结 点 。 因 此 , 根 元 素 为 所 有 元 素 的 父 
结 点 。 

(4) 实体 引用 。 实 体 引 用 就 是 具有 特定 含义 的 字符 对 象 。 实 体 引 用 可 以 用 两 种 形式 实 
H. & 字符 串 和 &# 实 体 编号 。 

(5) 注释 。 注 释 是 在 XML 文件 中 提供 解释 说 明 。 形 如 二 ! 一 一 说 明 一 一 之 。 在 应 用 

序 使 用 XML 文件 时 ,注释 会 被 忽略 。 

(6) CDATA HEE. PCDATA 片段 是 包含 在 元 素 内 部 的 内 容 ,会 序 解 析 。 而 
CDATA 片段 是 不 会 被 应 用 程序 解析 处 理 的 片段 ,CDATA 片段 会 eae 
留 。 通 常 CDATA 用 于 一 些 特 殊 符 号 正常 显示 。CDATA 片段 的 定义 形式 如 下 : 

« ! [CDATA[ 

文本 片段 

11> 

2. XML 的 命名 空间 

为 了 预防 不 同文 件 的 同名 标记 产生 冲突 ,XML 文件 中 可 以 用 命名 空间 对 这 些 同名 标 
记 进 行 区 分 。XML 的 命名 空间 是 一 组 关于 元 素 和 属性 命名 唯一 的 集合 的 名 称 。XML 的 
命名 空间 的 定义 形式 如 下 : 


< 命名 空间 前 级 : 元 素 名 mns: 命名 空间 前 级 =" 命 名 空间 URI"> 


在 定义 命名 空间 后 ,可 以 直接 使 用 命名 空间 的 前 级 来 表示 命名 空间 标识 符 。 

3. XML 的 数据 岛 

XML 数据 岛 是 租 入 到 HTML 中 的 XML 数据 ,能 被 微软 的 Internet Explorer 5. x 版 
本 及 以 上 版 本 识别 。 在 HTML HRA XML 数据 岛 的 形式 如 下 : 


«xml id= "数据 岛 名 " src= "ML 文件 URL"> 
</xml> 


或 
«xml id= "数据 岛 名 "src=" XML 文件 URL"/> 
定义 数据 岛 的 目的 是 使 用 XML 数据 ,这 就 需要 将 XML 数据 绑 定 到 具体 的 HTML 
中 。 通 常 HTML 的 标记 table 可 用 属性 datasre 绑 定 到 具体 的 XML 数据 岛 ,然后 可 以 使 用 
标记 span 或 标记 div 的 属性 datafld 来 引用 具体 的 XML 数据 岛 。 形 式 如 下 : 
«table datasrc- "4A f $y 4 "> 
«tr» 
«td» 
<span datafld- "xml 标记 "/> 
</td> 


</tr> 


</table> 
* 54° 


<table datasrc= 哇 数据 岛 名 "> 
«tr» 
«td» 
«div datafld- "xml 标记 "/> 
</td> 


</tr> 
</table> 


5.1.2 XML 的 相关 技术 


XML 文件 本 身 只 是 作为 数据 存储 的 作用 , 它 必 须 和 其 他 技术 结合 来 实现 特定 的 应 用 。 
图 5-1 展现 了 与 XML 相关 的 技术 。 


DTD 


| Css 


XML 上 一 一 一 个 | XSDL 


V4 IN 验证 数 
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| XLink XPointer | XQuery 
实现 超 链接 J 查询 数据 | 


图 5-1 XML 相关 技术 示意 


| XSL/XSLT Bs 
表现 数据 


1, CSS E REG 

CSS 可 以 和 XML 直接 结合 ,可 在 XML 文件 中 用 “二 ? xml-stylesheet? 二 ”处理 指令 , 指 
定 引 用 的 样式 表 文 件 ,将 XML 数据 按照 定义 的 样式 显示 。CSS 样式 定义 说 明 见 本 书 
第 3 章 。 

2. XSL/XSLT 

XSL 是 扩展 样式 表 语 言 。XSL 由 3 个 部 分 组 成 : XSLT( 扩 展 样 式 表 转换 )、 XPath 与 
XSL-FO。 

(1) XPath, XPath(XML Path Language) 是 XML 路 径 语言 ,用 于 XML 导航 ,实现 对 
XML 数据 的 定位 。 它 是 实现 XSLT, XPointer 以 及 解析 XML 的 前 提 基 础 。XPath KAA 
录 结 构 的 路 径 表 达 方 式 来 对 XML 数据 定位 ,并 提供 了 内 置 的 标准 函数 ,为 准确 表达 XML 
数据 提供 方便 。XPath 的 具体 应 用 见 配套 教材 5. 4 节 。 

(2) XSLT. XSLT 5 CSS 一 样 , 可 表示 XML 数据 。 但 不 同 之 处 在 于 ,XSLT 将 XML 
数据 转换 成 其 他 格式 ,而 CSS 只 是 定义 XML 数据 的 表示 样式 ,不 会 修改 XML 数据 。 
XSLT 转换 的 原理 如 图 5-2 所 示 。 

(3) XSL-FO。XSL-FO(XML Style Language Fomatting Objects) 用 于 格式 化 XML 数 
据 的 语言 。 
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XML Rif HTML ~ 
XSLT 处 理 器 | = XML fl] PDF 
XSIT 样 式 等 


图 5-2 XSLT 的 工作 原理 


3. DTD 

DTD(Document Type Definition) 是 文档 类 型 定义 ,说 明 XML 的 文档 结构 ,常用 来 验 
证 XML 文件 的 合法 性 。XML 文件 中 可 以 使 用 DOCTYPE 引入 外 部 的 DTD 文件 或 直接 
定义 内 部 的 DTD 来 实现 对 XML 文件 的 验证 。 

4. XSDL 

XSDL( XML Schema Definition Language) 表示 XML 模式 定义 语言 ,也 称 XSD. H 
于 定义 XML 结构 ,是 验证 XML 数据 的 另 一 种 方式 。 与 DTD 相 比 ,XSDL 基于 XML, 
可 以 表达 元 素 的 属性 的 数据 类 型 ,具有 扩展 . 灵活、 简单、 易学 等 特性 ,被 认为 是 DTD 
的 替代 者 。 

5. XLink 和 XPointer 

XLink(XML Linking Language) 表 示 XML 链接 语言 ,定义 创建 超 链 接 的 标准 方法 。 
XPointer( XML Pointer Language) 表 示 XML 指针 语言 ,实现 超 链接 指向 XML 内容。 通常 
XLink 和 XPointer(XML Pointer Language) 结 合 使 用 ,实现 对 访问 资源 的 操作 。 

6. XQuery 

XQuery(XML Query Language) 是 XML 查询 语言 ,用 于 查找 和 提取 XML 元 素 和 属 
性 。XQuery 往往 用 于 网 络 数 据 的 提取 。 


5.1.3 JavaScript 访问 XML 数据 


在 第 4 章 中 了 解 了 JavaScript 的 应 用 。JavaScript 也 可 以 与 XML 结合 ,开发 具有 实际 
意义 的 应 用 。 这 是 因为 ,大 部 分 浏览 器 中 具有 内 置 的 XML 解析 器 ,而 这 些 解析 器 将 XML 
数据 加 载 到 内 存 中 ,将 XML 数据 转换 成 为 JavaScript 可 处 理 访问 的 对 象 。JavaScript 可 根 
据 实际 需要 对 XML 数据 进行 处 理 。 通 过 这 样 的 一 个 过 程 ,使 得 JavaScript 访问 XML 数据 
成 为 可 能 。 

1. 加 载 XML 数据 

由 于 用 户 采 用 的 浏览 器 不 同 ,导致 浏览 器 内 置 的 XML 解析 器 也 会 有 所 不 同 。 从 而 使 
得 浏览 解析 器 在 加 载 XML 数据 的 形式 上 也 有 所 不 同 。 

(1) 微软 Internet Explorer 加 载 XML 数据 。 


var xmlDoc- new ActiveXObject ("Microsoft .XMLDOM") ; 
// 创 建 一 个 空 的 XML 文档 对 象 
xmlDoc.async- false; 
// 关 闭 异步 加 载 
xmlDoc.load ("XML X fF% .xm1"); 
// 通 知 解析 器 加 载 XML 文档 
. 56 。 


如 果 需 要 加 载 的 是 XML 数据 的 文本 片段 , 则 将 上 述 的 最 后 一 行 代码 改写 成 下 列 形式 : 
xmlDoc.1loadxML ("xml 字符 串 名 ") ; // 通 知 解析 器 加 载 RE 字符 串 
(2) 其 他 浏览 器 加 载 XML 数据 。 


xmlDoc- document . implementation.createDocument ("","",null); 

// 创 建 一 个 空 XML 文档 对 象 

xmlDoc.async- "false"; // 关 闭 异 步 加 载 

xmlDoc.1oad ("XML 文件 名 .xm1"); // 通 知 解析 器 加 载 KML 文档 

不 同 于 微软 Internet Explorer 使 用 loadXML() 解 析 XML 字符 串 , 其 他 浏览 器 如 
FireFox 等 通过 DOMParser 实现 对 XML 字符 串 的 加 载 ,形式 如 下 : 

var parser- new DOMParser(); 

// 创 建 空 的 x 文档 对 象 

var doc=parser.parseFromString (XML F f ffi 4 , "text/xml") ; 

// 加 载 XML 字符 串 

注意 : 关闭 异步 加 载 的 一 个 用 处 是 保证 文档 在 完全 加 载 之 前 ,javaScript 脚本 不 会 继续 
执行 。 

2. 解析 XML 数据 

加 载 XML 文件 后 ,就 可 以 通过 创建 的 XML DOM(XML 文档 对 象 ) 来 实现 对 XML 数 
据 的 解析 ,使 得 JavaScript 理解 XML 数据 ,达到 处 理 XML 数据 的 目的 。XML DOM 就 是 
提供 了 一 套 解 析 XML 数据 的 方法 ,具体 内 容 见 表 5-4。 

表 5-4 XML DOM 的 常见 方法 


方 法 说 Hj Ji 法 说 明 
getElementsByTagName (name) | 根据 标记 名 访问 结 点 | replaceChild(node) 用 新 结 点 替换 当前 结 点 
appendChild(node) 添加 新 结 点 createElement( element) 创建 新 结 点 
removeChild( node) 删除 结 点 createTextNode(node) | 创建 新 的 文本 结 点 


在 解析 过 程 中 将 XML 数据 视 之 XML 树 ,XML 树 中 的 每 一 个 成 分 为 结 点 , 结 点 类 型 见 
表 5-5。 然 后 按照 结 点 类 型 中 的 相应 方法 执行 对 结 点 的 处 理 ( 如 修改 .插入 和 删除 等 ) 。 


表 5-5 XML DOM 的 结 点 


结 点 类 型 说 8j 结 点 类 型 说 Hl 
Document 表示 XML 整个 文档 Attr 表示 元 素 的 属性 
DocumentFragment 表示 部 分 XML 文档 Text 表示 元 素 的 文本 内 容 
DocumentType 表示 文档 类 型 CDATASecetion 表示 CDATA 片段 
ProcessingInstruction 表示 处 理 指令 Comment 表示 注释 
EntityReference 表示 扩展 实体 引用 Entity 表示 实体 
Element 表示 XML 元 素 Notation 表示 DTD 声明 的 符号 
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5.2 实验 5.1 XML 的 验证 机 制 


实验 目的 : 


CD 了 解 XML 的 文件 结构 以 及 语法 特性 ,并 能 熟练 编制 XML 文件 。 

(2) 熟练 掌握 DTD 文档 类 型 定义 的 基本 要 求 ,并 使 用 DTD 定义 XML 文档 结构 。 
(3) 熟练 掌握 和 应 用 XSDL 语言 的 基本 内 容 , 并 使 用 XSDL 定义 XML 文档 结构 。 
(4) 比较 DTD 和 XSDL 两 种 XML 的 验证 机 制 。 


实验 内 容 : 


本 实验 是 设计 保存 通讯 录 数 据 的 XML 文件 。 在 这 个 实验 中 ,要 求 创 建 一 个 表示 通讯 
录 的 XML 文件 。 分别 用 DTD 和 XSDL 定义 该 XML 文件 的 文件 结构 ,并 分 别 将 定义 的 
DTD 文件 和 XSD 文件 导入 到 表示 通讯 录 的 XML 文件 进行 验证 ,从 而 达到 了 解 XML 文件 
的 定义 XML 的 两 种 验证 机 制 的 目的 。 


实验 步骤 : 


5&2] 1; 设计 和 建立 XML 文件 。 

本 次 练习 的 目的 是 了 解 XML 文件 结构 。 要 求 如 下 : 

CD 选 定 并 打开 一 个 文本 编辑 器 (如 Dreamweaver CS 3. 0) ,也 可 以 选择 XMLSpy 专业 
软件 ,然后 新 建 一 个 XML 类 型 的 文件 。 

(2) 打开 给 定 ContactList. xml 文件 ,代码 见 程 序 清单 5-1。 该 文件 中 定义 通讯 录 的 每 
条 记录 可 包括 数据 内 容 有 记录 的 编号 姓名、 关系 (朋友 同事. 亲属、 一般) .工作 单位 .职位 、 
电话 、 手 机、 电子 邮件 。 该 文件 存在 5 处 错误 ,请 指出 错误 ,并 修改 。 

程序 清单 5-1: 


<!--ContactList.xml--> 
<? xml version="1.0" encoding- "ISO- 8859-1"? > 
< 记录 4a = "AS00001"» 
< 姓名 > 陈 易 < /姓名 > 
< 关系 > 朋友 < /关系 > 
< 工作 单位 > 江南 乐 海 客车 厂 < /工作 单位 > 
< 职位 > 
< 电话 >0791- 5454543< /电话 > 
< 手机 >1309999999< /手机 > 
< 电子 邮件 > chenyi@ 163.com< /电子 邮件 > 
</ 记 录 > 
< 记录 > 
< 编号 >AS00002< /编号 > 
< 姓名 > 黄 明 < /姓名 > 
< 关系 > 同事 < /关系 > 
< 工作 单位 > 江南 师范 附小 </ 工 作 单 位 > 
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< 职位 > 教师 < /职位 > 
< 电话 >010- 32323244< 手 机 >13093564349< /电话 >< /手机 > 
< 电子 邮件 >huangming@ 163. com« /电子 邮件 > 

</ 记 录 > 


练习 2: 用 DTD 定义 XML 文件 结构 。 

本 次 练习 是 针对 修改 后 的 ContactList. xml, 打 开 以 有 ContactList. dtd 文件 (代码 见 程 
序 清 单 5-2) ,用 于 定义 对 应 的 XML 文件 结构 。 具 体 要 求 如 下 : 

(1) 修改 程序 清单 5-2 ,使 得 每 条 记录 的 记录 的 编号 (具有 唯一 性 ) 姓名 为 必 选 ,手机 和 
电话 数据 是 至 少 有 一 个 选中 ,其 他 数据 内 容 要 求 可 选 。 

程序 清单 5-2: 

<!--ContactList.dtd- -> 

< ! ELEMENT 通讯 录 (( 记 录 +))> 

<!ELEMENT 记录 (( 姓 名 ,关系 , 工作 单位 , 职位 , 电话 | 手机 ,电子 邮件 ))> 

<!ATTLIST 记录 


编号 CDATA # REQUIRED 

> 

< ! ELEMENT 姓名 (# PCDATA) $ REQUIRED» 

< ! ELEMENT 关系 (# PCDATA) # IMPLIED» 

< ELEMENT 工作 单位 (& PCDATA) # IMPLIED» 
< ! ELEMENT 职位 (# PCDATA) # IMPLIED» 

< ! ELEMENT 电话 (& PCDATA) # IMPLIED» 
<!ELEMENT 手机 (& PCDATA) # IMPLIED» 

< ! ELEMENT 电子 邮件 (# PCDATA) # IMPLIED» 


思考 : 定义 的 DTD 文件 是 否 可 以 实现 练习 的 要 求 ? 如 果 没 有 实现 是 什么 原因 ? wR 
实现 了 ,说明 DTD 的 语言 特性 。 

(2) MRA ContactList. xml 的 每 条 记录 增加 一 个 “来 源 ” 属 性 ,该 属性 的 值 只 能 为 “ 江 
蝉 的 通讯 录 ”, 形 如 “二 记录 i^ = "00001" 来 源 =" 江 蝉 的 通讯 录 " 盖 …</ 记 录 之 ”, 请 修 
改 已 定义 的 DTD 文件 ,使 得 对 应 的 XML 可 以 通过 验证 。 

(3) 假设 为 ContactList. xml 的 记录 增加 一 个 空 元 素 “ 记 录 结 束 ”, 请 修改 ContactList. 
dtd, 使 之 满足 要 求 。 

练习 3: 用 XSDL 定义 XML 文件 结构 。 

本 次 练习 是 用 XSDL 重新 定义 ContactList. xml 的 文件 结构 。 文 件 ContactList. xsd 
(代码 见 程序 清单 5-3) ,是 用 XSDL 语言 描述 的 ContactList. xml 文件 结构 。 该 xsd 文件 指 
定 通讯 录 的 记录 有 : 姓名 .关系 (朋友 、 同 事 . 亲 属 、 一 般 ) .工作 单位 .职位 .电话 、. 手 机、 电子 
邮件 。 请 将 | 代码 了 一 | 代码 8| 补 充 完整 。 

程序 清单 5-3: 


<?xml version="1.0" encoding- "UTF- 8"? » 
<!--ContactList.xsd--> 
«xs:schema xmlns:xs- "http://www .w3.org/2001/XMLSchema"> 


<xs:element name= "通讯 录 "> 
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<xs:complexType> 
<xs:sequence> 
<xs:element ref- "id 3" maxOccurs- "unbounded" /» 
< /xs:sequence» 
</xs:complexType> 
</xs:element> 


<xs:element name= "记录 "> 
<xs:complexType> 
«xs:sequence» 
«xs:element ref- "姓名 "/> 
«xs:element ref- "关系 "/> 
<xs:element re 人 "工作 单位 "/> 
<xs:element ref=" 职 位 "/> 
«xs:element ref=" 电 话 "/> 
<xs:element ref= "手机 "/> 
<xs:element ref- "电子 邮件 "/> 
< /xs:sequence» 
«xs:attribute name= "编号 " use- "required"» 
代码 1 
<!-- 说 明 编 号 属性 的 类 型 --> 
« /xs:attribute» 


< /xs:complexType» 
< /xs:element» 


<xs:element name= "Ki % "> 
代码 2 
<!-- 补 充 姓名 的 类 型 --> 


< /xs:element» 


<xs:element name- "X f "> 
代码 3 
<!-- 补 充 关 系 的 类 型 --> 


« /xs: element» 


<xs:element name- "工作 单位 "> 
代码 4 
<!-- 补 充 工 作 单 位 的 类 型 --> 


</xs:element> 


<xs:element name= "职位 "> 
代码 5 
<!-- 补 充 职位 的 类 型 --> 


« /xs: element» 
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<xs:element name- "电话 "> 
代码 6 
<!-- 补 充电 话 的 类 型 --> 


</xs:element> 


<xs:element name= "手机 "> 
代码 7 
<!-- 补 充 手机 的 类 型 --> 


</xs:element> 


«xs:element name= "电子 邮件 "> 
代码 8 
<!-- 补 充电 子 邮件 的 类 型 --> 


</xs:element> 


< /xs:schema» 


CD 按照 下 列 要 求 ,将 程序 清单 5-3 补充 完整 。 

(D 记录 中 说 明 编号 属性 、 编 号 属性 的 类 型 必须 为 整数 。 

@ 记录 中 的 姓名 .工作 单位 和 职位 指定 的 数据 类 型 为 字符 串 。 

@ 记录 中 的 关系 必须 指定 为 朋友 同事、 亲属 一般 中 的 一 种 ,不 能 重复 。 

© 记录 中 的 电话 数据 必须 按照 形式 “区 号 -号 码 ” 表 示 ,其 中 区 号 占 3 位 ,号 码 占 8 位 。 

© 记录 中 的 手机 数据 必须 为 数字 类 型 ,长度 介 于 7 一 12 位 之 间 。 

© 记录 中 的 电子 邮件 的 数据 的 格式 形 如 “邮件 名 @ 域 名 ”。 

(2) 如 果 将 上 述 的 ContactList. xml 文件 中 ,为 记录 元 素 增加 一 个 空 元 素 “ 记 录 结 束 ”， 
则 需要 对 对 应 的 XSD 文件 做 怎样 修改 ? 比较 XSD 的 非 空 元 素 . 带 属性 的 元 素 METIER 
的 元 素 以 及 空 元 素 的 定义 ,并 说 明 用 XSD 定义 这 些 元 素 的 特点 。 

(3) 比较 DTD 5 XSDL 的 语言 特色 ,并 写 出 二 者 的 区 别 , 并 用 本 实验 的 练习 进行 举例 
说 明 。 

(4) 请 用 户 参 考 本 书 或 其 他 教材 的 目录 结构 ,用 XML 定义 选中 书籍 的 目录 ,并 用 
XSDL 语言 对 定义 的 XML 文件 进行 验证 。 


5.3 实验 5.2 显示 XML 数据 


实验 目的 : 


(1) 掌握 和 运用 XML 数据 岛 解 决 问题 。 
(2) 掌握 和 熟练 运用 CSS 处 理 XML 数据 显示 。 
(3) 理解 和 掌握 XPath 技术 规范 。 
(4) 理解 和 掌握 XSLT 技术 规范 ,并 运用 XSLT 转换 XML 数据 ,实现 显示 XML. 
(5) 初步 了 解 JavaScript 结合 XSLT 转换 XML 的 过 程 。 
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实验 内 容 : 

设计 和 实现 一 个 显示 电影 列表 的 网 页 ,要 求 该 电影 列表 中 定义 若干 电影 信息 ,每 个 电影 
信息 中 记录 了 电影 的 名 称 .电影 制作 地 区 .电影 的 导演 主要 演员 .电影 类 型 、 上 映 时 间 及 海 
报 。 其 中 ,电影 导演 .主要 演员 和 电影 类 型 可 以 是 多 项 内 容 。 
实验 步骤 : 


本 次 实验 由 4 个 相关 的 练习 构成 。 按 照 练习 提供 的 步骤 依次 完成 任务 。 本 次 实验 的 电 
影 列 表 用 XML 定义 在 FilmList. xml 文件 中 ,具体 代码 见 程序 清单 5-4。 
程序 清单 5-4: 


<?xml version- "1.0" encoding= "UTF- 8"?> 
«1--FilmList.xml--» 


«FilmList» 
«Film id-"00001"» 
< Name» jf BE < /Name> <!-- 电 影 名 称 --> 
<Place> 中 国 < /Place> <!-- 地 区 --> 
<Director> 吴 宇 森 < /Director> <!-- 导 演 --> 
«Star» WES Hi 金城武 ,张震 .张丰毅 < /Star> <!-- 主 要 演员 --> 
<Type> 战 争 片 .历史 片 < /Type> <!-- 类 型 --> 
<Schedule>2008 年 7 月 1 H < /Schedule» <!-- 上 映 时 间 --> 
<Description> 三 国 时 期 ,刘备 和 孙权 两 支 大 军 在 赤壁 与 曹操 的 部 队 大 战 ,用 火 攻打 败 曹军 
的 历史 故事 。< /Description> «1--füjft--» 
< Poster» image/cibi .jpg< /Poster» 
« /Film» 
«Film id= "00002"> 
< Name» JJ] K fik fii < /Name> 
< Place» Kk% < /Place» 


< Director> Mark Osborme, John StEvEnson< /Director> 
«Star» Jack Black, I JÈ , Dustin Hoffman< /Star> 
< Type» z) iit Hr .动作 片 .喜剧 片 < /Type> 
< Schedule» 2008 fF 6 H 6 H « /Schedule» 
«Description» fe jit Bu] E 2] AP Es JJ FT WC A i 10:25 09 983 5] 48 JE HU MGE. « /Description» 
< Poster» image/panda. jpg« /Poster> 

« /Film» 

«Film» 
«Name» Jl f 93 Hb. 2: 黄金 部 队 < /Name> 
« Place» X < /Place> 
«Director» Guillermo DelToro« /Director> 
«Star» Selma Blair, RonPerIman, Jeffrey Tambor< /Star> 
«Type» Hi Jr FERT ah fer < /Type> 
«Schedule» 2008 4 5 月 19 日 < /Schedule» 
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«Description» "Hf 9 BEP RIZ HE SR SE E E T 3A CHE, </Description> 
« Poster» image/hellboy.jpg« /Poster» 
« /Film» 
< /FilmList» 


5&2] 1. 用 数据 岛 绑 定 XML 数据 。 

本 次 练习 是 通过 用 数据 岛 实 现 对 XML 数据 的 显示 。 要 求 : 

CD 设计 和 实现 用 数据 岛 显 示 XML 数据 。 要 求 : 打开 Internet Explorer 5. x 以 上 版 
本 的 浏览 器 ,运行 网 页 FilmList. html( 代 码 见 程序 清单 5-5) ,观察 并 记录 运行 结果 。 修 改 该 
网 页 的 代码 ,使 得 该 网 页 中 用 表格 绑 定 FilmList. xml 文件 ,并 将 该 XML 文件 中 的 信息 按照 
表格 形式 显示 输出 。 表 格 每 一 行 有 一 部 电影 的 信息 ,海报 放置 在 每 一 行 的 第 一 个 单元 格 ,其 
他 信息 可 以 明显 区 别 ,运行 结果 类 似 图 5-3。 
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图 5-3 数据 岛 绑 定 XML 数据 


程序 清单 5-5: 


<!--FilmList.htm--> 
<html> 
<head> 
«meta http- equiv- "Content- Type" content- "text/html; charset= gb2312"/> 
<title> 数 据 岛 的 应 用 < /title> 
</head> 
<body> 
«xml id-"filmlist" src- "FilmList.xml"/» 
«table width= "690" 
<caption> 新 片上 映 < /caption» 
«tr» 
* 63 « 


«th width= "50"» &nbsp;« /th> 
«th width= "53"> 4 fk < /th» 

«th width- "50"> 地 区 < /th> 

<th width= "79"> 导 演 </th> 

<th width= "171"> 主要 演员 < /th> 
<th width= "38"> 类 型 < /th> 

«th width="137" > 上映 时 间 < /th> 
<th width="76"> 简 介 < /th> 


</tr> 
</table> 
«table bgcolor="#999999" border- "1" bordercolor- "#333333" > 
«tr» 
«td» 
<img datafld- "Poster" width- "60" height- "80"/» 
<!-- 海 报 --> 
<span datafld="Name"/> 
<!-- 电 影 名 称 --> 
<span datafld- "Place"/> 
<!-- 地 区 --> 
<span datafld- "Director"/» 
<!-- 导 演 --> 


<span datafld="Star"/> 
<!-- 主 要 演员 --> 

<span datafld="Type"/> 
<!-- 电 影 类 型 --> 

<span datafld= "Schedule"/> 
<!-- 电 影 上 映 时 间 --> 

« span datafld- "Description"/» 
<!-- 电 影 简介 --> 
</td> 

</tr> 

</table> 
< /body> 
</html> 


(2) 在 实现 上 述 功能 的 FilmList. html 中 继续 修改 ,使 得 网 页 中 的 记录 可 以 分 页 显示 。 
要 求 : 每 个 页 面 中 可 以 显示 两 条 电影 信息 记录 ,定义 4 个 按钮 分 别 具 有 单 击 显示 第 一 页 的 
记录 、 上 一 个 的 记录 ,下 一 个 记录 和 最 后 一 个 记录 的 功能 。 选 择 “ 第 一 页 ”按钮 和 选择 “下 一 
页 ”按钮 的 运行 结果 如 图 5-4 和 图 5-5 所 示 。 

(3) 将 上 述 定义 功能 完整 的 FilmList. html 网 页 在 DreamWeaver CS( 或 XMLSpy) 中 
验证 ,记录 验证 结果 。 然 后 在 其 他 浏览 器 (如 FireFox) 中 打开 ,观察 并 记录 运行 结果 。 解 释 
运行 结果 产生 的 原因 ? 

a. s 
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图 5-5 数据 岛 实现 分 页 显示 下 一 面 记录 


练习 2: CSS 显示 XML 数据 。 
本 次 练习 是 为 FilmList. xml 文件 用 CSS 定义 显示 样式 。 要 求 如 下 : 


CD 阅读 外 部 CSS 样式 表 FilmList. css 文件 ,具体 内 容 见 程序 清单 5-6, 请 重新 定义 该 
样式 表 内 容 , 使 得 FilmList. xml 文件 的 显示 效果 为 表格 ,表格 的 每 一 行 记 录 一 个 电影 信息 。 
其 中 每 一 个 电影 记录 中 ,电影 名 称 和 其 他 信息 分 成 两 列 , 对 于 表格 单元 格 的 记录 要 求 前 景 颜 


色 和 背景 颜色 不 同 (颜色 可 以 自选 ) ,使 得 每 一 行 的 记录 可 以 明显 区 分 。 


程序 清单 5-6: 


/* FilmList.css* / 

FilmList( /定义 Film List 标 记 的 样式 x / 
background- color:# 000000; 
width:800; 
height:600; 


Film{ /* 定义 Film 标记 的 样式 * / 
Color:# 3A2885; 
border:# 333333; 
) 
Name( / * 定义 Name 标 记 的 样式 * / 
background- color:# 3A2885; 
color:# 00A6AD; 
font:x- large; 
) 
Place, Star, Schedule( / * 定义 Place, Star, Schedule 标记 的 样式 * / 
background- color:# 00A6AD; 
) 
Director,type,Description( / * 定义 Director, type, Description 标记 的 样式 * / 
background- color: 205AA7; 
color:# 999999; 
) 


(2) 在 FilmList. xml 中 加 入 指令 


<?xml- stylesheet type="text/css" href- "FilmList.css"?» 


使 得 FilmList. xml 的 运行 结果 类 似 图 5-6. 
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图 5-6 CSS 按 表格 形式 显示 XML 


a) 在 图 5-6 中 没有 显示 电影 的 海报 图 片 ,请 问 有 什么 办 法 可 以 让 XML 文件 显示 海报 
图 片 ? 请 写 出 代码 ,并 在 浏览 器 中 运行 你 的 解决 方法 。 如 果 无 法 显示 XML 文件 中 的 不 同 


的 海报 图 片 ,请 写 出 原因 。 
(2) 比较 CSS 显示 XML 数据 和 上 述 用 数据 岛 显 示 XML 数据 的 异同 。 请 二 者 的 
不 同 之 处 。 
练习 3: XSLT 显示 XML 数据 。 
本 次 练习 用 XSLT 转换 XML 数据 ,达到 表现 XML 数据 的 效果 。 在 本 次 练习 中 仍 采 用 
上 述 的 FilmList. xml 文件 。 然 后 按照 下 列 的 步骤 依次 完成 练习 。 具 体内 容 如 下 : 
(OD 下 列 是 用 XSL 定义 的 一 个 XSLT 文件 FilmList. xslt, 希 望 能 显示 电影 列表 中 所 有 
的 记录 ,具体 内 容 见 程序 清单 5-7。 然 后 修改 FilmList. xml, 取 消 使 用 FilmList. ess 定义 的 
CSS 样式 ,而 是 声明 使 用 FilmList. xslt 定义 的 XSLT 样式 表 , 具 体内 容 见 程序 清单 5-8。 在 
浏览 器 中 运行 FilmList. xml, 观 察 运行 结果 是 否 与 图 5-7 一 致 。 如 果 运 行 结果 与 希望 的 结 
果 不 一 致 ,请 解释 原因 。 
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图 5-7 输出 电影 列表 中 所 有 文本 信息 


程序 清单 5-7: 


<?xml version- "1.0" encoding- "GB2312"?> 

«xsl:stylesheet version- "2.0" 
xmins:xsl-"http://www.w3.0rg/1999/XSL/Transform" 

xmlns:xs- "http://www .w3.org/2001/XMLSchema" 

xmlns:fn- "http: //www.w3.org/2005/xpath- functions"? 

«xsl:output method- "xml" version- "1.0" encoding- "GB2312" indent- "yes"/» 
«1--FilmList.xslt--» 


. 67 。 


«xsl:template match- 
«html» 


<head> 
<title> 显 示 电影 列表 < /title> 
</head> 


<body bgcolor= "# 000000"> 
<table bgcolor= "4 333333" border="1"> 
<xsl:for-each select- "FilmList"» 

«tr style- "color:£ CCCCCC" bgcolor= "4 333333"» 
«td»«xsl:value-of select-"Name" /></td> 
«td»«xsl:value-of select-"Place" /></td> 
«td»«xsl:value-of select- "Director" /»«/td» 
«td»«xsl:value-of select-"Star" /></td> 
«td»«xsl:value-of select- Type" /»«/td» 
«td»«xsl:value-of select- "Schedule" /></td> 

</tr> 

« /xsl:for- each» 
</table> 
< /body> 
</html> 
</xsl:template> 
< /xsl:stylesheet» 


程序 清单 5-8: 


<?xml version="1.0" encoding- "GB2312"?> 
<?xml- stylesheet type- "text/xsl" href="FilmList.xslt"?> 
<!--Filmbist.xml 声明 使 用 XSLT 文 件 --> 
«FilmList» 
«Film» 
< Name» jf BE < /Name> 
< Place» f [i] < /Place> 
« Director» X 3: ff« /Director> 
<Star> 梁 朝 伟 、 金 城 武 ,张震 ,张丰毅 < /Star> 
< Type> Hk F Hr .历史 片 < /Type> 
< Schedule» 2008 fF. 7 H 1 H « /Schedule» 
<Description> 三 国 时 期 ,刘备 和 孙权 两 支 大 军 在 赤壁 与 曹操 的 部 队 大 战 ,用 火 攻 打败 曹军 
的 历史 故事 。 
< /Description» 
< Poster> image/cibi .jpg< /Poster> 
< /Film> 
<Film> 
<Name> 功 夫 熊猫 < /Name> 
« Place» X « /Place> 
«Director» Mark Osborme, John StEvEnson< /Director> 


«Star» Jack Black, fl JE , Dustin Hoffman« /Star» 

< Type» zl] ifi Fr 动作 片 . 喜 剧 片 </TYpe> 

<Schedule>2008 年 6 H 6 H « /Schedule» 

<Description> 熊 猫 阿 宝 习 练 中 国 功夫 ,打败 凶猛 邪恶 的 雪豹 秦 龙 的 故事 。 
< /Description» 


< Poster» image/panda. jpg« /Poster> 


</Film 
«Film» 


«Name» Hh f 93 Hi 2. 黄金 部 队 < /Name> 
< Place» WK Æ< /Place» 


< Director» Guillermo DelToro< /Director> 


« Star» Selma Blair, RonPerIman, Jeffrey Tambor< /Star> 
«Type» 2k Hi Fr. .科幻 片 . 动 作 片 < /Type> 

<Schedule>2008 年 5 月 19 H « /Schedule» 

<Description>“ 地 狱 男 甸 ”" 和 奇幻 世界 的 如 阿达 王子 斗争 的 故事 。 
< /Description» 


< Poster» image/hellboy.jpg« /Poster» 


« /Film» 
« /FilmList» 


(2) 修改 FilmList. xslt 文件 ,要 求 显 示 电 影 列 表 中 的 所 有 电影 信息 (包括 海报 图 片 )， 
具体 显示 格式 的 要 求 如 下 : 每 条 电影 记录 中 的 “海报 ” 缩 略 图 片 ( 宽 : 90px; 高 :120px) 和 其 
他 文字 信息 分 两 列 显 示 ;" 海 报 ” 缩 略图 是 一 个 图 片 链 接 。 即 单 击 “ 海 报 ” 缩 略图 片 ,可 导航 
到 “海报 ”的 原 尺 寸 大 小 的 图 片 ; 放 置 文本 信息 的 列 由 6 行 构成 ,不 同行 的 背景 色 和 前 景色 不 
同 , 行 和 行 可 以 明显 区 分 。 运 行 结果 如 图 5-8 所 示 。 
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图 5-8 按 XSLT 定 义 样式 输出 
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(3) 修改 上 述 FilmList. xslt, 要 求 只 显示 电影 列表 中 属于 动作 片 类 型 的 电影 记录 。 显 
示 样 式 同 上 ,运行 结果 如 图 5-9。 思 考 : 要 求 显示 上 映 时 间 在 2008 年 6 月 份 以 后 的 电影 记 
录 ， 或 要 求 显示 电影 的 id 为 奇数 的 电影 记录 之 类 ,或 要 求 按照 演员 名 字 进 行 排序 等 问题 ,该 
如 何 处 理 , 请 写 出 你 的 处 理 办 法 。 

i 


文件 到) SEO EV KEG IAD Hho 
Q O- AAG Ps ym 6 $$ 58 € 
HME D [E] z:\ 书 WFB 书 实验 指导 \source\chapter03\FilnList_2 xal Dgr Gowe|G- wh? ges. 


ortor CIF 


主要 演员 ，: SMS Blair、 rIman. JS Ur Tambor 


上 映 时 间 ，2008 年 5 月 19 日 


dime M suom 


图 5-9 显示 条 件 记 录 信 息 


(3) 利用 XML fll XSLT 自行 设计 和 实现 一 个 关于 介绍 电影 的 网 站 ,或 主题 另 选 

练习 4: XSLT 十 JavaScript 转换 XML 数据 。 

由 于 存在 有 些 浏览 器 不 支持 XML 文件 的 直接 显示 ,所 以 需要 将 XML 文件 转换 成 其 他 
格式 的 文件 。 本 次 练习 的 目的 是 了 解 在 客户 端 用 XSLT 转换 XML 文件 成 为 其 他 形式 的 文 
件 如 HTML, XHTML 等 ,主要 内 容 是 用 XML 十 XSLT 十 JavaScript 等 技术 ,设计 一 个 提供 
候车 时 刻 表 信息 的 服务 网 站 。 按 照 下列 步 又 依次 完成 练习 。 

CD 已 知 用 XML 定义 火车 时 刻 表 在 TrainList. xml 中 ,具体 代码 见 程序 清单 5-9. 
后 用 XSLT 为 该 XML 文件 定义 的 样式 文件 TrainList. xslt, 具 体内 容 ee 清单 5-10， ke 
式 要求 每 一 条 记录 在 表格 中 的 每 一 行 中 显示 。 最 后 运行 程序 清单 5-11 中 定义 的 XHTML 
文件 TrainList. html, 运 行 TrainList. html1。 观 察 运行 结果 。 解 释 说 明 程 序 清 单 5-11 中 的 
JavaScript 定义 的 脚本 中 的 每 一 行 功能 ,并 修改 该 脚本 ,使 之 能 在 其 他 浏览 器 中 也 可 以 


程序 清单 5-9: 


<?xml version- "1.0" encoding= "gb2312"?> 
<!--Trainhist.xml--> 
«TrainList» 
«Train» 
«Line» Z17« /Line> <!--#K--> 
. 70 。 


«Type» ELA fF {R< /Type> 
< From» JL 5t fli < /From> 
«To» K^ « /To» 
< GoOff> 18:00« /Gooff> 
<ArrivalTime> 07:21< /ArrivalTime> 
« Distance» 1587 4 fl < /Distance> 
</Train> 
<Train> 
«Line» K7< /Line> 
< Type» 25 ili] #¢ tk « /Type> 
< From» iX H < /From» 
«To» J J< /To> 
< GoOff> 19:28« /Gooff> 
<ArrivalTime> 08:46< /ArrivalTime> 
« Distance» 1089 4t Hi < /Distance» 
« /Train» 
…<!-- 略 ,其 他 候车 时 刻 请 自行 补充 --> 
« /TrainList» 


程序 清单 5-10: 


<?xml version- "1.0" encoding= "GB2312"?> 


<!--Trainbist.xslt--> 
«xsl:stylesheet version- "2.0" 


xmlns:xs 


"http: //www.w3.org/1999/XSL/Transform" 
xmlns:xs- "http://www.w3.0rg/2001/XMLSchema" 


<!-- 类 型 --> 
<!-- 始 发 站 --> 
<!-- 终 点 站 --> 


<!-- 出 发 时 间 --> 
<!-- 达 到 时 间 --> 


<!-- 里 程 --> 
<!-- 车 次 --> 
«1--3E390-—» 
<!-- 始 发 站 --> 
<!-- 终 点 站 --> 
<!-- 出 发 时 间 --> 
<!-- 达 到 时 间 --> 


xmlns:fn= "http: //www.w3.0rg/2005/xpath- functions"> 

<xsl:output method= "xml" version- "1.0" encoding- "GB2312" indent="yes"/> 
<xsl:template match="/"> 

<html xmlns= "http: //www.w3.0rg/1999/xhtml"» 


<head> 
<title> 火 车 时 刻 列 表 < /title> 
< /head» 
<body> 
<table> 
<caption> 火 车 时 刻 表 < /caption> 
«tr» 
<th> 车 次 </th> 
<th> 始 发 站 < /th> 
<th> 终 点 站 < /th> 
<th> 发 车 时 间 < /th> 
<th> 达 到 时 间 < /th> 
<th> 里 程 < /th> 
</tr> 


<xsl:for-each select="TrainList/Train"> 
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xe 
«td»«xsl:value- of select="Line"/>< /td» 
«td»«xsl:value-of select- "From"/» « /td» 
«td»«xsl:value-of select- "To"/» « /td» 
«td»«xsl:value- of select- "GoOff"/>< /td> 
«td»«xsl:value-of select- "ArrivalTime"/»« /td> 
«td» «xsl:value-of select- "Distance"/»« /td> 
</tr> 
« /xsl:for- each» 
« /table» 
< /body> 
< /html> 
</xsl:template> 
</xsl:stylesheet> 


程序 清单 5-11: 


<!--TrainList.html- -> 

< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"» 
«html» 

«body» 


«script type- "text/javascript"» 

// 装载 TrainList.xml 文件 

var xml- new ActiveXObject ("Microsoft .XMLDOM") 
xml.async- false 

xml.load("TrainList.xml") 


// 装 载 TrainList.xslt 文件 
var xsl=new ActiveXObject ("Microsoft .XMLDOM") 
xsl.async- false 


xsl.load("TrainList.xslt") 


// XSLT 转换 XML, 并 输出 转换 结果 
document .write (xml.transformNode (xsl)) 
</script> 

< /body> 

</html> 


(2) 由 于 火车 时 刻 表 的 记录 非常 多 ,请 用 定义 JavaScript 定义 脚本 ,实现 火车 时 刻 表 分 


页 显示 ,每 一 页 6 个 记录 ,并 通过 “第 一 页 ”“ 上 一 页 ”“ 下 一 页 ”和 “最 后 一 页 ”这 4 个 按钮 ， 


帮助 用 户 翻 页 浏览 ,运行 结果 如 图 5-10 所 示 。 代 码 见 程序 清单 5-12 ,请 按照 要 求 ,将 该 程序 


从 


代码 1 一 | 代码 四 处 补充 完整 。 
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图 5-10 分 页 显示 示意 图 


程序 清单 5-12: 


< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"» 

«!-- TrainListl.html- -» 

«html xmlns= "http: //www.w3.org/1999/xhtm1"> 

<head> 

<meta http- equiv- "Content- Type" content= "text/html; charset=gb2312"/> 
<title> 火 车 列表 < /title» 

< /head> 


<body> 
<script language- "javascript"» 
var pageNume 6; 
// 每 页 的 记录 数 
var page-0; 
// 前 一 页 面 
var Text ; 
// 需 要 显示 的 内 容 ， 
var xmlDoc =new ActiveXObject ("Microsoft .XMLDOM") ; 
xmlDoc.async- "false" ; 
f 1|; 
// 补 充 代码 ,实现 加 载 TrainList.xml 
header="< table width= '80$ '» "+ 
"< caption> 火 车 列表 < /caption» "+ 
"<tr><th> 线 路 < /th> "+ 
"<th> 类 型 < /th> "+ 
"<th> 起 始 站 < /th> "+ 
"<th> 终 点 站 </th> "+ 
"<th> 出 发 时 间 < /th> "+ 
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"<th> 达 到 时 间 < /th> "+ 
"<th> 里 程 < /th>< /tr> "7 


var maxNum- xmlDoc.getElementsByTagName ("Train") . length; 
// 检 索 的 记录 数 
var column- xmlDoc.getElementsByTagName ("Train") .item(0) .childNodes; 
// 记 录 的 列 数 
var colNum= column.length; 
var pagesNumber- Math.ceil (maxNum/pageNum) - 1; 
// 页 数 
function firstPage() 
// 第 一 页 { 
代码 2 : 
// 补 充 代码 ,显示 第 一 页 
} 


function GoFirstPage () { 
代码 3| 
// 补 充 代码 ,转向 第 一 页 
) 


function lastPage () { 
// 最 后 页 面 
thePage= "< input type= 'button' value= ' 最 后 一 页 ' onClick= 'JavaScript:return GoLastPage 
0'/»"; 
return thePage; 


function GoLastPage () { 
// 转 向 最 后 页 
page= pagesNumber; 
getContent () ; 
Text-""; 


function UpPage (page) { 
// b= 4 9t iii 

代码 4|; 
// 补 充 代码 ,实现 显示 上 一 个 页 面 按钮 


return thePage; 


t 
function NextPage (page) 
HTH 
t 
var thePage- "< input type= 'button' value= 'Jri — Ji ' disabled- 'disabled'/»"; 
if (page« pagesNumber) 
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thePage- "< input type= "button" value= ' 后 一 页 ' onClick- 'JavaScript:return GoNextPage () 
us 


return thePage; 


function GoUpPage () { 
// 前 一 页 
RS 5|; 


// 补 充 代 码 ,转向 上 一 个 页 面 
getContent () ; 
Text-""; 


function GoNextPage () 

// 后 一 页 

{ 

if (page«pagesNumber) paget++; 
getContent () ; 
Text-""; 


function pageInfo (page) 

// 显 示 分 页 信息 

{ 
var pb; 
pb= firstPage ()+" "+ UpPage (page)+" "+NextPage(page)+" "+lastPage(); 
return pb; 


function getContent () { 
if (!page) page=0; 
n= page * pageNum; 
endNum- (page+ 1) * pageNum; 
if (endNum> maxNum) endNum- maxNum; 
Text- header* Text; 
for (;n«endNum;n--4)( 
Text=Text+ "<tr>"; 
for (m= 0;m<=6;m+ +) { 
mName= column. item (m) .tagName; 
Text=Text+ ("<td> "+ 
xmlDoc.getElementsByTagName (mName) .item (n) .text+ 
"c /td» "); 
H 
Text- Text "</tr>" 
mm-""; 
} 
resultHtml.innerHTML- Text+ "< /table> "+ pageInfo (page) ; 


Text- " 
} 
</script> 
<div id= "resultHtml"> 
<script> 
if (maxNum== 0) 
{ 
document .write ("没有 火车 记录 ") 
else( 
getContent () ; 
) 
</script> 
</div> 
< /body> 
</html> 


思考 : 请 结合 XML XSLT 和 JavaScript 实现 上 述 同样 的 功能 。 其 中 ,XML 实现 数据 
定义 ,XSLT 实现 数据 转换 ,JavaScript 实现 为 数据 的 有 条 件 选 取 提 供 条 件 。 
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8568 WAP 2.0 编程 


伴随 移动 设备 用 户 的 日 益 增 多 ,以 及 无 线 Internet 的 广泛 应 用 和 普及 ,有 必要 了 解 无 线 
应 用 的 相关 技术 。WAP 是 开发 无 线 应 用 的 佼佼 者 。 一 方面 ,WAP 得 到 广大 的 无 线 移动 设 
备 的 支持 ; 另 一 方面 , WAP 为 无 线 移动 设备 提供 访问 互联 网 的 内 容 和 高 级 数据 。 因 此 ， 
WAP 是 沟通 无 线 应 用 和 互联 网 的 桥梁 。 本 章 将 从 开发 无 线 网 页 的 角度 出 发 ,着 重 介绍 
WAP 2.0 fj WML,XHTML MP,WMLScript, WCSS, 


6.1 预备 知识 


6.1.1 WAP 2.0 概述 


WAP 表示 无 线 应 用 协议 。 当 前 的 最 新 版 本 是 WAP 2.0. 5j WAP 1.x 相 比 ,WAP 2.0 具 
有 新 的 特点 。 

(OD WAP 2.0 采用 双 协 议 架 构 。WAP 2.0 不 但 兼容 支持 WAP 1. x 的 WSP/WTP/ 
WDP 协议 ,而 且 支 持 HTTP, TCP/IP, TLS 协议 。 这 样 使 得 WAP 2.0 的 网 关 不 必 向 
WAP 1. x 的 网 关 一 样 ,要 将 WSP/WTP/WDP 转换 成 HTTP/TLS/TCP 协议 ,如 图 6-1 所 
示 , 而 是 直接 通过 HTTP/TCP 访问 ,提高 了 运行 速度 和 执行 性 能 , 见 图 6-2。 


客户 应 网 关 应 用 服务 器 
| 编码 请 求 > [uk 
CGI 脚本 
WAP 用 户 
m AREH 
解码 响应 | 《响应 (内容) D 
图 6-1 WAP 1.x 的 编程 模型 


WAP 设 备 应 用 服务 器 


请 求 (URL) 
一 一 一 一 HTTP 
END ud um 
WAP 浏 览 器 响应 (内 容 ) 
推送 
K 推送 (内容 ) 启动 器 


图 6-2 WAP 2.0 的 编程 模型 


* TF = 


(2) WAP 2.0 突破 了 网 络 环境 的 制约 。 无 论 在 2. 5G 通信 网 络 还 是 3G 通信 网 络 ,无 线 
移动 设备 可 以 通过 WAP 2.0 访问 Internet. 

(3) WAP 2. 0 提供 了 丰富 的 应 用 环境 。 不 但 兼容 并 继续 支持 了 WAP 1.x 的 
WML 1. x, 而 且 还 支持 XHTML MP、WML 2.0, WCSS 等 。 使 得 无 线 应 用 环境 进一步 和 
Internet 的 应 用 环境 趋向 一 致 。 

(4) WAP 2.0 可 以 进一步 降低 无 线 移动 设备 消耗 的 电力 ,使 各 种 无 线 移 动 设备 使 用 时 
间 更 为 长 久 。 


6.1.2 WAP 2.0 支持 的 标记 语言 


WAP 2.0 定义 的 无 线 应 用 环境 中 允许 使 用 的 标记 语言 有 WML 1. x, WML 2. 0, 
XHTML MP, HK, WML 1. x 是 WAP 2. 0 3€ Z$ WAP 1. x 而 来 ,而 WML 2. 0 和 
XHTML MP 是 WAP 2.0 新 增 的 标记 语言 。 

1. WML 1.x 

WML 1.x 是 无 线 标记 语言 ,是 XML 1.0 的 子 集 , 与 XML 的 语法 规则 保持 一 致 。 
WML 1. x 定义 了 一 套 实 现 包括 文本 、 图 像 、 音 频 等 内 容 描述 标记 库 ,通过 标记 库 设计 和 实 
现 WAP 网 页 。 

2. WML 2.0 

WML 2.0 也 是 一 种 无 线 标记 语言 ,虽然 名 称 与 WML 1. x 一致 ,但 是 表示 的 内 容 发 生 
了 巨大 的 变化 。 这 是 因为 WML 2.0 是 接受 XHTML Basic 规范 的 产物 ,是 XHTML MP 
的 超 集 。 一 方面 ,凡是 可 以 用 XHTML Basic 定义 的 内 容 一 律 采 用 XHTML Basic 和 WCSS 
来 实现 ; 另 一 方面 ,对 于 不 可 用 XHTML Basic 和 WCSS 表示 的 内 容 , 仍 可 以 用 WML 1. x 
的 语义 表示 。 为 了 与 WML 1. x 区别 ,WML 2.0 Æ WML 1.x 语 义 中 增加 了 前 缀 wml:。 

3. XHTML MP 

XHTML MP 表示 扩展 超 文本 链接 语言 移动 描述 ,是 XHTML 1. 0 的 子 集 , 具 有 
XHTML 所 有 的 语法 要 求 。XHTML MP 具有 XHTML Basic 的 所 有 内 容 , 但 并 不 与 
WML 1.x 兼 容 。 此 外 ,XHTML MP 不 再 支持 锚 点 ,不 支持 显示 下 划 线 的 u 标记 ,不 支持 软 
键盘 ,不 支持 脚本 ,不 支持 变量 ,不 支持 事件 ,不 支持 timer 定时 器 ,不 支持 input 输入 框 的 
format 属性 等 内 容 。 通 常 XHTML MP 与 WCSS 结合 使 用 。 


表 6-1 WML 1. x, WML 2.0 和 XHTML MP 的 常见 标记 


类 m WML 1.x WML 2.0 XHTML MP 
文件 结构 wml, card, head, | body, head, html, title, wml: card bodyd hab dile 
access 和 template | 和 wml:access 
b. bi . | abbr,acronym,address, blockquote, | abbr, acronym, address, blockquote, 
文本 显示 及 a ee ee br, cite, code, dfn, div, em, strong, | br, cite, code, dfn, div, em, strong, 
s strong, small, up, 
布局 Ab var,hl,h2, h3, h4, h5, h6, kbd, p, | var, hl, h2, h3, h4, h5, h6, kbd, p, 
re r 
PA pre,q,samp,span,b,big.small 和 u | pre.q.samp.span,b, big 和 small 
超 链接 a 和 anchor a,link 和 wml:anchor a 和 link 
水 平分 割 hr hr 
列表 dd. dl. dt, li ul 和 ol dd. dl, dt,li ul 和 ol 
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续 表 


类 Gil WML 1.x WML 2.0 XHTML MP 
表单 select, optgroup, option, | form, input, label, select, option, | form, input, label, select, option, 
input 和 fieldset textarea ,fieldset 和 optgroup textarea, fieldset 和 optgroup 
表格 table,tr 和 td table,td,th,tr 和 caption table,td,th,tr 和 caption 
图 像 img img img 
对 象 object 和 param object 和 param 
基 址 base base 
链接 link link 
元 信息 meta meta meta 
样式 模块 style style 
: gO、 : Pre、 : refresh 
任务 go,Ppre,refresh 和 noop wn, 85. vil: pres wink refresh A 
wml:noop 
事件 do、onevent 和 postfield rini aa da 
l:getvar, wml;se 
变量 和 wm getvar wml:setvar 和 
wml: timer 
6.1.3 WCSS 


WCSS( Wireless Profile Cascading Style Sheet . JG Z& fii 35 J # PEK) ,是 CSS 2. 0 的 


FARA WAP 的 特别 扩展 构成 。WCSS 必须 和 XHTML MP 结合 使 用 。 由 于 不 同 移动 设备 
具有 不 同 的 物理 特性 ,例如 屏幕 的 大 小 、 分 辨 率 不 同 。 而 WCSS 的 出 现 ,为 不 同 的 移动 设备 
处 理 显示 样式 提供 了 可 能 ,充分 体现 了 当前 Internet 世界 中 数据 内 容 和 数据 表现 相 分 离 的 
原则 , 比 WML 具有 更 好 的 控制 表现 的 功能 。 

但 是 ,WCSS 也 有 自身 的 一 些 问 题 。 在 第 一 次 使 用 WCSS 样式 时 ,必须 将 全 部 的 
WCSS 样式 文件 从 服务 器 下 载 到 手机 中 ,一 方面 ,增加 了 服务 器 的 工作 负担 ; 另 一 方面 ,在 一 
定 程 度 上 影响 了 WAP 网 页 的 执行 效率 。 

WCSS 作为 CSS 2.0 的 子 集 ,具有 与 CSS 2. 0 一 致 的 语法 规则 。 

(1) WCSS 的 样式 声明 形式 如 下 : 

选择 器 1[, 选 择 器 2,… ,选择 器 m] { 

属性 名 1: 属性 值 ; 
[属性 名 2. 属性 值 ; 


属性 名 n: 属性 值 ] 
选择 器 指定 需要 定义 样式 的 标记 ,选择 器 可 以 有 一 个 ,也 可 以 有 多 个 。 选 择 器 之 间 用 去 
号 (,) 分 隔 。 选 择 器 有 "派生 选择 器 "“ 类 选择 器 "“ID 选择 器 "“ 全 局 选择 器 "“ 组 选择 器 ” 
等 。 这 些 选择 器 的 类 型 与 CSS 2.0 定义 的 类 型 一 致 。 属 性 名 是 指 希 望 修改 属性 的 名 称 , 取 
值 由 属性 值 指定 。 属 性 的 定义 也 可 以 有 多 个 .属性 定义 之 间 用 分 号 (;) 分 开 。 常 见 的 WESS 
的 属性 及 说 明 见 表 6-2, 其 中 “跑马 灯 ”“ 软 键盘 ”和 “输入 "是 WAP 扩展 属性 ,具体 见 表 6-2。 
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表 6-2 WCSS 的 常见 属性 


类 型 属 性 说 明 类 型 属 性 说 明 
border-width 边框 宽度 font-family 字体 
border-top-width 上 边框 宽度 font-style 字体 样式 
border-right-width ”| 右边 框 宽度 = font-variant 字体 的 异体 
boderbouomewidh | FH — | | foneweight 字体 的 粗细 
border-left-width 左边 框 宽度 font-size 字体 的 尺寸 
border-color 边框 颜色 font 字体 
border-top-color 上 边框 颜色 list-style-type 列表 样式 类 别 
border-right-color 右边 框 颜色 id list-style-position | 列表 样式 定位 
border-left-color 左边 框 颜色 list-style-image 列表 样式 图 片 
border-bottom-color | 下 边框 颜色 list-style 列表 样式 
border-style 边框 样式 text-indent 文本 缩 进 
border-top-style 上 边框 样式 text-align 对 齐 文 本 
border-right-style 右边 框 样式 | text-decoration 文本 修饰 
border-left-style 左边 框 样式 TE text-transform 文本 变形 

框 模型 | border-bottom-style | 下 边框 样式 white-space 空白 
border-top 上 边框 color 设置 文本 颜色 
border-right 右边 框 display 设置 显示 文本 效果 
border-left 左边 框 float 相对 显示 内 容 的 位 置 
border-bottom 下 边框 显示 格 | clear 清除 
padding 内 边 距 式 化 | width 宽度 
padding-top 上 内 边 距 height 高 度 
padding-right d UA LE vertical-align 水 平 排列 
padding-bottom 下 内 边 距 可 视 visibility 可 视 性 
padding-left 左 内 边 距 display 设置 显示 效果 ( 值 为 
margin 外 边 距 Ba a 
margin-top 上 外 边 距 -wap-marquee-style 跑 马 灯 样式 ( 值 有 

= slide/scroll/alternate) 

margin-right 右 外 边 距 跑马 灯 
margin-bottom 下 外 边 距 -wap-marquee-loop | 跑马 灯 循 环 
margin-left 左 外 边 距 -wap-marquee-dir | 跑马 灯 方向 ( 值 为 ltyrt) 
background-color 背景 颜色 PERESEIS 跑马 灯 的 速度 ( 值 有 
background-image 背景 图 片 fast/normal/slow) 

颜色 和 | background-repeat 反复 背景 图 -wap-input-format | 设置 输入 格式 

背景 background-attachment | 放置 背景 输入 ] 7 输入 留 白 ( 值 为 true/ 
background-position | 背景 定位 | 
background 背景 软 键盘 | -wap-accesskey 设置 软 键盘 
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(2) WCSS 中 可 以 用 “/ * 注释 * /来 说 明 注 释 , 达 到 解释 代码 的 作用 。 注 释 可 以 在 多 
行 中 显示 。 在 浏览 器 解释 WAP 网 页 时 ,WCSS 的 注释 会 被 忽略 。 
(3) WCSS 的 MIME 的 类 型 仍 是 text/css, 定 义 的 WCSS 样式 文件 后 级 仍 为 css。 


6.1.4 WMLScript 


WMLScript 是 一 种 服务 于 移动 设备 的 脚本 语言 ,是 基于 ECMAScript 脚本 语言 发 展 起 
来 的 。 它 往往 和 WML 1. x 结合 开发 无 线 应 用 ,服务 于 WML 1. x 语言。WMLScript 并 不 
是 嵌入 到 WML 网 页 内 部 ,而 是 一 个 独立 的 外 部 文件 ,该 外 部 文件 在 服务 器 端的 WAP 网 关 
编译 成 二 进 制 文件 ,然后 下 载 到 移动 设备 中 ,为 相关 的 WML 网 页 提供 相应 的 支持 。 
WMLScript 文件 有 两 种 形式 。 

(1) 扩展 名 为 wmls, 是 文本 文件 ,保存 WMLScript 的 源 程序 代码 。 

(2) 扩展 名 为 wmlsc, 是 二 进 制 的 字 节 码 文件 ,也 就 是 源 程序 文件 编译 后 的 文件 。 

WMLScript 的 主要 优点 如 下 : 

(1) 用 于 用 户 输入 的 合法 性 检验 。 

(2) 扩展 移动 设备 的 功能 。 

(3) 提供 友好 的 人 机 界面 设计 ,为 良好 的 人 机 交互 提供 可 能 。 

(4) 克服 移动 服务 网 络 的 带宽 的 限制 ,提供 丰富 的 程序 功能 。 所 以 ,有 必要 了 解 
WMLScript 脚本 语言 。 


6.1.5 WAP 网 页 设计 要 点 


与 第 2 章 介 绍 的 网 页 设计 原则 类 似 , 设 计 一 个 应 用 在 无 线 移 动 设备 上 的 WAP 网 页 也 
需要 考虑 用 户 对 象 WAP 网 页 的 主题 .WAP 网 页 的 色彩 体系 等 要 求 。 除 此 之 外 ,开发 
WAP 网 页 还 要 充分 考虑 移动 设备 是 性 能 受 限 的 设备 ,表现 在 显示 分 辨 率 、 色 彩 、 运 算 能 力 、 
存储 能 力 .电池 消耗 都 有 所 不 同 。 更 重要 的 是 ,移动 设备 具有 的 功能 是 不 一 致 的 。 这 就 决定 
了 WAP 网 页 在 设计 上 具有 自身 的 特点 。 

CD 建立 有 效 合 理 的 WAP 的 导航 模型 ,用 户 可 以 快速 学 会 和 使 用 导航 。 对 于 实现 导 
航 的 “选择 列表 ”“ 复 选 框 ”等 多 种 组 件 , 应 考虑 输入 形式 最 为 简单 的 导航 方式 ,快速 导航 到 
指定 的 位 置 。 其 次 ,导航 层次 不 超过 5 层 ,不 宜 过 深 ,否则 用 户 容易 失去 导航 目标 。 这 意味 
着 ,用 WML 1. x 开发 网 页 ,WML 内 不 能 超过 5 张 card。 

(2) 设计 时 ,要 充分 考虑 目标 设备 的 屏幕 大 小 。WAP 网 页 的 内 容 不 能 过 多 ei n] RI 
WAP 网 页 的 文本 最 好 居中 显示 ,使 用 的 样式 前 后 保持 一 致 。 不 要 使 用 过 多 的 色彩 ,影响 用 
户 阅 读 。 

G) 要 合理 使 用 图 片 和 表格 ,如 果 图 片 不 是 主要 内 容 , 要 慎 用 。 对 于 屏幕 过 小 的 移动 设 
备 ,利用 表格 分 开 内 容 没 有 太 大 的 意义 ,所 以 也 要 慎 用 。 

(4) 如 果 必 须要 用 图 片 , 图 片 的 格式 必须 适用 于 最 大 范围 的 移动 设备 。WAP 网 页 使 用 
的 图 片 数 量 不 能 太 多 。 另 外 ,每 幅 图 片 也 不 能 太 大 ,否则 会 影响 执行 效率 。 在 使 用 图 片 中 要 
确定 图 片 的 宽度 和 高 度 。 

(5) 设计 有 效 的 反馈 信息 ,对 于 用 户 操 作 的 结果 ,最 好 给 出 反馈 ,引导 用 户 作出 正确 的 
操作 。 
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(6) 充分 考虑 目标 设备 的 存储 能 力 , WAP 网 页 不 能 过 大 。 这 表示 网 页 文件 中 的 注释 要 
简单 明了 ,不 能 过 多 占据 文件 大 小 。 尽 量 少 用 class 和 id 的 应 用 样式 。 

(7) 用 XHTML MP 开发 网 页 ,网 页 使 用 的 字符 集 为 Unicode, 确 保 网 页 文件 可 以 让 
WAP 浏览 器 正确 解析 。 


6.2 实验 6.1 开发 和 测试 WAP 应 用 的 工具 


实验 目的 : 


(1) 了 解 常见 开发 WAP 网 页 的 开发 工具 。 
(2) 了 解 测试 WAP 网 页 的 主要 模拟 器 。 
(3) 初步 了 解 简单 的 WAP 网 页 的 制作 和 调试 。 


实验 内 容 : 
(1) 在 Windows 环境 下 ,安装 WAP 网 页 的 编辑 器 Nokia Mobile Internet ToolKit 4.1, 


(2) 安装 和 使 用 WinWap for Windows 4. 1 浏览 器 。 
(3) 安装 和 使 用 OpenWave 6. 22 浏览 器 。 


实验 步骤 : 


练习 1: 安装 Nokia Mobile Internet Toolkit 4. 1. 

Nokia Mobile Internet Toolkit 4. 1 是 诺基亚 公司 提供 的 免费 开发 工具 软件 。 要 正确 安 
装 该 软件 ,需要 到 http://www. forum. nokia. com/ 网 站 下 载 本 软件 ,本 软件 的 Patch for 
JRE 5. 0 的 补丁 文件 以 及 请 求 软件 的 序列 码 。 

(1) 首先 ,必须 安装 Sun 公司 开发 的 JDK 5.0 以 上 版 本 的 Java 开发 工具 包 。 如 果 已 安 
装 可 以 直接 进入 第 (2) 步 。 

(2) 安装 Nokia Mobile Internet Toolkit 4. 1 编辑 器 。 

CD 打开 安装 软件 NMIT_41. exe, 会 出 现 一 个 启动 画面 ,如 图 6-3 所 示 。 


Nokia Mobile 
Internet Toolkit 
Version 4.1 


Copyright © 1998-2004 Nokia Corporation 
Al rights reserved 


NOKIA 


图 6-3 Nokia Mobile Internet Toolkit 的 启动 
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© 当 启 动 完 毕 ,进入 安装 软件 的 “平台 需求 ”画面 ,如 图 6-4 所 示 。 单 击 Next 按钮 ,出 
现 “ 介 绍 ” 界 面 ,如 图 6-5 所 示 。 单 击 Next 按钮 继续 安装 。 


Ñ Nokia Nobile Internet Toolkit 4.1 
Platform Requirements for Nokia Mobile Internet Toolkit 4.1 


a; 


Your computer will now be checked for the following: 

* Operating system and service pack version. 

+ That Java Runtime Environment meets minimum requirements. 
* Thatthe productyou are installing is not already installed. 


Press 'Next'to begin the check, or 'Cancel'to abort the installation. 


InstallAnywhere by Zero G 


图 6-4 平台 需求 界面 


Ñ Wokia Mobile Internet Toolkit 4.1 


Introduction 


This package will install: 
Nokia Mobile Internet Toolkit 4.1 
Nokia Update Manager 2.0 
This package will offer to remove (if present): 
Nokia Mobile Internet Toolkit 4.0 
Nokia Content Publishing Tool 2.0 or 2.0.1 


Itis strongly recommended that you quit all Nokia tools and other 
programs before continuing with this installation. 


You may cancel this installation by clicking the "Cancel button. Ifyou 
cancel after files have begun installing (not recommended), then be 
sure to use Add/Remove Programs to remove your incomplete 
installation. 


InstallAnywhere by Zero G 


(MCN, i 
图 6-5 介绍 界面 


© 在 如 图 6-6 所 示 “ 用 户 软 件 许 可 协议 ”界面 。 单 击 I accept the terms of the License 
Agreement 单 选 按钮 。 

@ 在 如 图 6-7 界面 中 ,按照 要 求 输入 Nokia Forum 网 站 的 用 户 名 和 请 求 的 序列 码 后 ， 
选择 Next 按钮 。 其 中 ,用 户 名 和 序列 码 可 以 到 Nokia Forum 网 站 免费 申请 获得 。 

C 再 在 设 定 目 录 界 面 中 设 定安 装 软件 的 根 目录 ,如 图 6-8 所 示 。 可 以 单 击 Choose 按 
钮 重新 设置 根 目录 。 

© 设置 根 目录 后 ,在 随后 出 现 的 “关联 文件 类 型 "界面 中 设置 Nokia Mobile Internet 
Toolkit 关联 支持 的 文件 类 型 ,如 图 6-9 所 示 。 也 可 以 选择 All of the above 复 选 框 表示 选择 
所 有 的 文件 类 型 。 然 后 选择 Next 按钮 进入 下 一 个 步骤 。 
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Hokia Mobile Internet Toolkit 4.1 


End-user software agreement 


Installation and Use of Nokia Mobile Internet Toolkit 4.1 Requires 
Acceptance of the Following License Agreement: 
NOKIA CORPORATION END-USER SOFTWARE AGREEMENT 


This Software Agreement (“Agreement”) is between You [either 
an individual or an entity), the End User, and Nokia 
Corporation ("Nokia"). The Agreement authorizes You to use 
the Software speci d in Clause | below, which may be 
stored on a CD-ROM, sent to You by electronic mail, or 
downloaded From Nokia's Web pages or Servers or from other 
sources under the terms and conditions set Forth below. This 
is an agreement on end-user rights and not an agreement For 
sale. Nokia continues to oen the copy of the Software and M 

© l accept the terms of the License Agreement 

© | 40 NOT accept the tems of the License Agreement 


InstallAnywhere by Zero G 
Cancel 


Kokia Mobile Internet Toolkit 4.1 


Welcome 


You have selected a Nokia developer product to be installed. You have 
the following installation options: [1] Ifyou are already a member of 
Forum Nokia and you have the serial number for this product, fill in the 
text fields below and then press the Next button; [2] Ifyou are not a 
member of Forum Nokia or do not have a serial number for this. 
product, please leave the text fields below empty and then press the 
Next button 


Forum Nokia username: 
Product serial number: 


InstallAnywhere by Zero G 


Hokia Mobile Internet Toolkit 4.1 


Choose Root Install Folder 


Please accept or modify the root location and press Next. 
{DE Wokia 


[estore Default Folder | [ Choose 


InstallAnywhere by Zero G 


Cancel 


图 6-8 设置 根 目录 


X Nokia Nobile Internet Toolkit 4.1 


Select the file types you want to register with NMIT 4.1: 
E]WML (wmi) 
WMLScript ( wmls ) 


WBMP (.wbmp) 


XHTML (xhtml) 


MMS (.mms) 


SMIL (.smi, .smil) 


WAP Push (si, sic, .sl, .slc, .co, coc) 


Multipart (.mp, .mpc ) 


DRM (dr .dcf, dm) 


Rit ofthe above 


图 6-9 设置 关联 文件 类 型 
@ 最 后 Nokia Mobile Internet Toolkit 4. 1 会 安装 并 合并 文件 ,直至 结束 安装 。 
(3) 安装 Patch for JRE 5. 0 补丁 文件 ,会 出 现 一 个 启动 画面 ,如 图 6-10。 当 启动 过 程 完 


毕 , 会 进入 到 Patch for JRE 5.0 的 下 一 个 安装 步骤 。 然 后 按照 与 Nokia Mobile Internet 
Toolkit 安装 类 似 的 步 又 继续 安装 ,直至 安装 结束 。 


Nokia Mobile 
Internet Toolkit | 


Version 4.1 


Patch for JRE 5 


Copyright € 1998 - 2006 Nokia Corporation 
All rights reserved 


NOKIA 


图 6-10 Patch for JRE 5.0 的 启动 


(4) 安装 编辑 器 成 功 后 ,从 Windows 环境 中 选择 “开始 ”| 程序 ”| Nokia Developer 
Tools| Nokia Mobile Internet Toolkit| NMIT 4.1, 打 开 编辑 器 ,如 图 6-11 所 示 。 接 着 ,就 可 
以 在 编辑 器 中 用 菜单 栏 的 “文件 "或 左 窗口 中 的 导航 功能 实现 新 建 、 打 开 等 与 WAP 网 页 制 
作 相 关 的 文件 操作 。 

练习 2. 安装 和 使 用 WinWAP for Windows 4. 1. 

WinWAP for Windows 4. 1 是 芬兰 WinWAP 研发 的 浏览 器 软件 。 该 软件 可 以 在 
Windows 环境 下 模拟 手机 浏览 器 的 软件 。 该 软件 可 支持 XHTML MP 1.2,XHTML 1.0, 
WML 2.0, HTML 4.01 和 CSS, 是 与 WAP 2.0 完全 兼容 的 浏览 器 软件 。 该 软件 可 以 在 
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"0 Nokia Nobile Internet Toolkit 
File Edit Windows Tools Help 


SDK Panel 
Welcome Page and SDK Control Panel 
Al&o 
Get Started — 
Create a new file or open an 
existing one. Authoring MMS, Wo Installed Devices 
XHTML-MP and WML content 


are just some of your options. 
Or create Digital Rights content 
to protect your mobile content 
for deployment. 


Preview Content 

Send contentto any or all of the 
available SDKs. You can even 
have multiple instances ofthe 
same SDK fnr side-by-side 


v 


图 6-11 打开 Nokia Mobile Internet Toolkit 4. 1 


http://www. winwap. com/downloads 网 站 下 载 。 

(1) 安装 WinWAP for Windows 4.1, 双 击 下 载 后 的 WinWAP-win32. exe 文件 后 ,进入 
安装 流程 ， pe 

O 首先 出 现 一 个 选择 安装 语言 的 窗口 ,如 图 6-12 所 示 。 然 后 ,用 户 根据 自己 的 要 求 ， 
在 下 拉 列 表 中 选择 语言 , 单 击 OK 按钮 。 

Q) 在 随后 出 现 的 安装 向 导 欢 迎 窗口 (图 6-13) 中 单 击 Next 按钮 。 进 入 安装 目录 设置 
窗口 (图 6-14) 。 用 户 可 单 击 Browse 按钮 选择 安装 目录 ,然后 单 击 Next 按钮 ,进行 任务 
设置 。 


w Setup 一 Win¥AP for Windows 


Welcome to the WinWAP for 
Windows Setup Wizard 


This will install WinWAP for Windows 4.1 on your computer. 
Itis recommended that you close all other applications before 
continuing 


Click Next to continue, or Cancel to exi Setup. 


Select the language to use during the installation: 


图 6-12 选择 安装 语言 图 6-13 ”安装 向 导 欢 迎 窗口 


@ 在 “任务 设置 "窗口 (图 6-15) 中 ,有 3 个 复 选 框 ,从 上 到 下 依次 是 “创建 桌面 快捷 图 
标 ”“ 创 建 一 个 快速 启动 图 标 " 和 “关联 文件 "”。 用 户 根据 实际 要 求 设置 任务 后 , 单 击 Next 
按钮 ,进入 安装 界面 ,如 图 6-16 所 示 。 安 装 完毕 后 , 单 击 Finish 按钮 结束 安装 ,如 图 6-17 
所 示 。 
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w Setup — WinWAP for Windows 


Select Destination Location 
"Where should WinWAP for Windows be installed? 


Ww Setup will install WinWAP for Windows into the following folder. 


To continue, click Nest If you would like to select a different folder, click Browse. 


Atleast 5.5 MB of free disk space is required. 


(<Back 


图 6-14 设置 目录 界面 


Setup — WinWAP for Windows 


Select Additional Tasks 
Which additional tasks should be performed? 


Select the additional tasks you would like Setup to perform while installing WirWAP for 
Windows, then click Newt. 


Additional icons: 
Create a desktop icon 

[C Create a Quick Launch icon 

Other tasks: 


图 6-15 任务 设置 


W Setup — WinWAP for Windows 
Installing 
Please wait while Setup installs WirIWAP for Windows on your computer. 


Extracting fies... 
D:\Winwap Technologies WiriWAP for Windows 4.1\WirlWapBrowseiX ocx 


图 6-16 正在 安装 
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w Setup 一 WinWAP for Windows 


Completing the WinWAP for 
Windows Setup Wizard 


Setup has finished installing WiriWAP for Windows on your 
computer. The. may be launched by selecting the 


Click Finish to exit Setup. 


Launch WinWAP for Windows 


图 6-17 完成 安装 


(2) 使 用 WinWAP for Windows 4. 1。 在 Windows 环境 下 ,打开 “开始 ”|“ 程 序 ”| 
WinWAP for Windows| WinWAP for Windows 4. 1 软件 ,出 现 图 6-18 的 窗口 。 注 意 , 在 第 
一 次 使 用 该 浏览 器 时 需要 设置 语言 。 

如 果 使 用 的 是 “试用 版 ”, 需 要 获取 “免费 的 试用 证 书 ”, 否 则 无 法 浏览 内 容 。 具 体 做 法 是 
选择 菜单 栏 中 的 “帮助 1“ 注册 WinWAP” 项 ,进入 “注册 ”窗口 ,如 图 6-19 所 示 。 单 击 Get 
free evaluation (trial) license 单 选 按钮 ,再 输入 下 载 试 用 版 WinWAP 时 使 用 的 E-mail 

即 可 。 


w Winwap Portal - HR... (| 区 | 
文件 中 ) REE MAW) 执行 (6) 


D ael 


‘portal. winwap. com 国 e | 


News 
2 4B Entertainment 


Registration 


This application must be registered. The E-Mail address provided is ONLY used 


© Get free evaluation (trial) license 
Registration Key: 


Your E-mail:  |dddd@ddfdd.com 


Register now! 


图 6-18 运行 WinWAP 图 6-19 注册 窗口 


如 果 具 有 注册 证 书 , 则 选择 Get full license, 并 在 Registration Key 和 Your E-mail 中 分 
别 输入 你 购买 的 注册 码 和 E-mail, 
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浏览 WAP 网 页 是 在 Address 栏 中 输入 一 个 WAP 网 页 的 地 址 ,如 http://wap. yahoo. 
com. cn, 然 后 按 Enter 键 ,观察 运行 结果 .并 可 以 浏览 该 WAP 网 站 的 各 个 不 同 页 面 。 

(3) 在 WinWAP 浏览 器 中 打开 WML 1. x 的 文件 .XHTML MP 的 文件 以 及 HTML 
的 文件 ,观察 运行 结果 。 说 明 哪 些 类 型 的 文件 可 以 正常 显示 。 

练习 3: 安装 和 使 用 OpenWave SDK 6.2.2. 

OpenWave SDK 6. 2.2 是 OpenWave 公司 开发 的 基于 Windows 平台 的 服务 于 无 线 应 
用 的 软件 。OpenWave 内 置 一 个 手机 模拟 器 OpenWave Simulator, 可 以 浏览 无 线 Web 应 
用 。OpenWave SDK 6. 2. 2 可 以 从 http://www. developer/openwave 站 点 下 载 。 如 果 需 
要 运行 WMLScript 脚本 的 话 ,还 需要 下 载 Phone Simulator 6. 2. 2 (WAP 1. x 网络 插件 )， 
支持 WAP 1. x 网 络 功能 。 

(1) 安装 OpenWave SDK 6.2.2。 

O 双击 下 载 的 Openwave_SDK_622. exe, 进 入 安装 向 导 窗 口 , 运 行 状 况 如 图 6-20。 然 
后 单 击 Next 按钮 。 


Openwave Install Wizard 


wm to the Install Wizard for Openwave 
SDK 6.22 


This Install Wizard wil install Openwave SDK 6 2.2. on 
your computer. 


To continue, click Next 


图 6-20 Openwave 安装 向 导 


© 在 出 现 的 “安全 协议 "窗口 , 单 击 Yes 按钮 ,如 图 6-21 所 示 。 


Openwave Install Wizard 
Safe Country Verification 
© orenwave- 
Please read the following Safe Country Verification Agreement. 
Press the PAGE DOWN key to see the rest of the agreement 
IF YOU ARE LOCATED IN CUBA, IRAN, IRAQ NORTH KOREA, SUDAN. 
LIBYA. OR TALIE Occur 


IHANISTAN (DR ANY OTHER COUN’ 
ICURRENTLY ON THE UNITED STATES BUREAU OF EXPORT ADMINISTRATIONS 


3 OF Ratt JED COUNTRIES), OR YOU ARE A PARTY ON THE U.S. 
[TREASURY | 


GOI 
DEPARTMENT'S LIST OF SPECIALLY arin hee NATIO! 
Di 


INALS OR. 

THE U.S. COMMERCE DEPARTMENT'S TABLE OF DENIAL ORDERS, YOU MAY NOT 

DOWNLOAD OR USE THE SDK SOFTWARE AND THE END USER LICENSE 
IREEMENT INCLUDED WITH THE SOFTWARE IS VOID. 


Do you accept al the tems of the Safe Country Verification Agreement 
If you choose No, Setup wil close. To naa pensare SK 22 you must acceptis 


图 6-21 安全 协议 
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@ 随后 设置 安装 目录 , 单 击 Browse 按钮 ,在 目录 列表 中 选 定 要 安装 的 路 径 。 设 置 完 毕 
后 , 单 击 Next 按钮 ,进入 安装 复制 文件 的 过 程 。 


Openwave Install Wizard 


Choose Destination Location 
Select folder where Setup will install fles. e OPENWAVE™ 


Setup wil install Openwave SDK 6.2.2. in the following folder. 
To install to this folder, cick Next. To install to a diferent folder, click Browse and select 
another folder. 


Destination Folder- 


— 622 


Installshield 


<Back || Next>’ Cancel 


图 6-22 设置 安装 目录 


@ 当 所 有 的 文件 安装 复制 完成 ,会 出 现 图 6-23 所 示 任 务 设置 窗口 。 该 窗口 有 两 个 复 
选 框 ,分 别 表示 “浏览 发 行 说 明 ” 和 “创建 桌面 快捷 方式 ”。 然 后 单 击 Finish 按钮 ,结束 安装 。 
Setup Complete 
The Install Wizard has finished instaling Openwave SDK on 


= your computer. Please choose the options you want 


[woud ie to view the relrase notes} 


TV. | would like to place SDK shortcuts on my desktop. 


Click Finish to complete Openwave SDK Setup. 


xe 
图 6-23 ”安装 完成 


(2) 安装 Phone Simulator 6.2.2 WAP 1. x 网 络 插 件 。 双 击 插件 文件 Openwave SDK 
_622wap. exe, 操 作 过 程 类 似 安装 “OpenWave SDK 6. 2.2”。 此 处 略 。 

注意 : OpenWave 公司 发 布 最 新 的 浏览 器 是 OpenWave V7 Simulator, 该 浏览 器 模拟 
器 与 WAP 2.0 规范 保持 一 致 ,具有 双 协 议 功能 ,不 需要 另外 安装 支持 WAP 1.x 网 络 
的 插件 。 但 是 ,OpenWave V7 Simulator 在 本 地 不 能 支持 WMLScript, 需 要 设置 网 关 , 特 
此 说 明 。 

(3) 使 用 OpenWave SDK 6. 2.2。 在 使 用 OpenWave SDK 6. 2. 2 时 ,要 注意 无 线 应 用 
的 网 络 环境 。 如 果 无 线 应 用 是 通过 HTTP 实现 的 , 则 打开 * 开 始 ”| FE" | OpenWave SDK 
6. 2. 2|OpenWave SDK 6.2.2 HTTP; 若 使 用 的 是 WAP 1. x 的 WAP 网 关 , 则 需要 打开 “ 开 
ih” | FU" | OpenWave SDK 6. 2. 2|OpenWave SDK 6.2.2 WAP, 

PETS 


(D 打开 OpenWave SDK 6. 2. 2 HTTP. 在 go 的 地 址 栏 中 分 别 输入 http: //wap. 
yahoo. com 和 http://wap. sina. com. cn ,观察 运行 结果 ,并 思考 二 者 是 否 可 以 正常 运行 。 
并 通过 菜单 栏 的 Tools | Options, 进 入 SDK Configuration 配置 窗口 ,在 配置 窗口 中 选择 
Language, 在 出 现 的 窗口 中 (图 6-24) 设 置 语言 和 文字 字体 。 


Language and Script 


i [Chinese Simplified (zh-cn) [Æ|  [VlOverride suggestions 


i [Chinese Simplified (GB. 2312-80) E 


Default Fixed width Font 
Muse Fixed width Font: 
Fixed width Font: 


MingLiU 

宋体 -18030 

= 
新 宋体 -18030 


Size: 
g a 


ET 
Ca Cee) 


图 6-24 语言 和 脚本 设置 


© 打开 OpenWave SDK 6. 2.2 WAP, 同 样 在 go 地 址 栏 中 输入 http://wap. yahoo. 
com, 观 察 并 记录 运行 结果 。 


6.3 实验 6.2 WML 1.x 与 WMLScript 开发 WAP 应 用 
实验 目的 : 


(1) 进一步 掌握 开发 和 测试 WAP 网 页 的 软件 工具 。 

(2) 熟练 掌握 WML 1. x 的 基本 语法 。 

(3) 了 解 WMLScript 的 基本 语法 和 常见 的 库 函 数 的 使 用 要 求 。 
(4) 要 求 能 结合 WML 1. x 和 WMLScript 解决 具体 的 无 线 应 用 。 
(5) 初步 体验 WAP 网 页 的 设计 原则 和 基本 要 求 。 


实验 内 容 : 
COD 完成 一 个 WAP 网 页 ,使 之 实现 矩形 面积 的 计算 。 
(2) 为 无 线 移 动 设备 设计 一 个 简易 表单 注册 页 面 。 
实验 步骤 : 


练习 1: 计算 矩形 的 面积 。 


本 次 练习 的 目的 是 了 解 WML 实现 输入 以 及 结合 WMLScript 实现 计算 和 输出 。 具 体 
ok. 
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CD 分 别 用 WinWap.OpenWave SDK 6.2. 2 HTTP fll OpenWave SDK 6.2. 2 WAP 
运行 下 列 计算 长 方形 面积 的 程序 area. wml, 面 积 计算 由 area. wmls 完成 ,它们 的 代码 分 别 
见 程序 清单 6-1 和 程序 清单 6-2 ,观察 并 分 析 运 行 结果 ,比较 在 不 同 浏览 器 下 支持 的 功能 有 
什么 不 同 。 

程序 清单 6-1: 


<?xml version- "1.0" encoding- "gb2312"?» 
<!--area.wml--> 
<wml> 
«card id-"cardl" title= "面积 " newcontext- "true"> 
«p» 
高 度 :< input format- "N * M" name- "height" title- "高 度 :" value- "0"/» «br/» 
宽度 :< input format- "N * M" name- "weight" title- "宽度 :" value="0"/> 
<br/> 面 积 是 : «b» $ (result)« /b> 
« do type- "accept" name= "cal" label= "计算 "> 
«go href- "area.wmls# calculate ('$ (height) ', '$ (weight) ')"/» 
< /do» 
</p> 
< /card» 
< /wml> 


程序 清单 6-2: 


/* area.wmls * / 
extern function calculate (height, weight) ( 
var areaResult; 
areaResult-height * weight; 
WMLBrowser.setVar "result", areaResult); * Openwave SDK 6.2.2 BR) 


WMLBrowser.refresh(); File Edit View Tools Help 


} 


(2) 修改 程序 ,使 之 用 OpenWave SDK 6.2.2 WAP iz 
4F area. wml 的 结果 如 图 6-25 所 示 ,实现 矩形 面积 的 计算 。 

注意 : 在 OpenWave SDK 6. 2. 2 WAP 中 运行 的 
WMLScript 脚本 必须 是 已 编译 的 ,可 以 通过 Nokia Mobile 
Internet Toolkit 4. 1 实现 对 文件 的 编译 。 

练习 2: 设计 和 实现 表单 注册 。 

实现 一 个 简易 的 表单 注册 ,用 户 填 写 的 注册 信息 有 用 户 
名 密码 .E-mail 昵称 和 出 生日 期 。 要 求 对 用 户 填 写 的 注册 
信息 进行 验证 ,其 中 ,用 户 名 为 必 填 项 ,不 能 为 空 ;密码 必 选 
项 ,不 能 为 空 ,并 且 密 码 的 长 度 不 能 小 于 8 个 字符 ;E-mail 是 
必 选 项 ,填写 形式 要 求 合乎 xxx@com. cn 形式 ;出 生日 期 是 
可 选项 ,如 填写 必须 合乎 日 期 的 格式 的 合法 形式 , 形 如 
“YYYYMMDD”( 年 月 日 ); 昵 称 是 可 选项 。 要求 如 下 : 
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图 6-25 ”和 矩形 面积 的 计算 


CD 下 列 程序 validateForm. wml( 代 码 见 程序 清单 6-3) 定 义 了 注册 表单 页 ,所 有 信息 格 
式 的 验证 是 通过 validateForm. wmlsc 来 实现 的 。 请 将 | 代码 了 | 一 | 代码 3 引 处 补充 完整 。 
程序 清单 6-3: 


<?xml version="1.0" encoding- "gb2312"?» 
< ! DOCTYPE wml PUBLIC "- //WAPFORUM//DTD WML 1.3//EN" 
"http: //www.wapforum.org/DTD/wmll3.dtd"» 
«!-- validateForm.wml- -> 
<wml> 
«card id= "cardl" title= "注册 表单 "> 
<p> 注 意 ; * 是 必 填 <br/> 
<b>$ (errorMsg)< /b><br/> 


<!-- 出 错 信息 --> 
* 用 户 名 :<br/> 


«input name= "username"/» <br/> 
* 密码 (不 能 小 于 8 个 字符 )<br/> 
«input type=| {Rø 1| name- "password"/><br/> 
<!-- 定 义 密码 框 --> 

* Email:<br/> 

<input name= "email"/» «br/» 
«1- - 5E X. email fñ A f£ - 

了 昵称 :<br/> 

<input name- "name"/» <br/> 

<!-- 定 义 昵 称 输入 框 -=-> 

出 生日 期 (YYYYMMDD) :<br/> 


<input name- "birthday" format-|fXfi 2| emptyok- | 4&3 3| /» « br/» 
<!-- 定 义 文本 框 ,只 接收 长 度 为 8 的 数字 字符 --> 
<a href- "validateForm.wmlsc# validate () "> 确定 </a> 
«/p» 
< /card» 
< /wml> 


(2) validateForm. wmls 是 验证 输入 数据 的 脚本 ,代码 如 程序 清单 6-4 所 示 。 阅 读 程 序 
理解 代码 的 含义 ,请 将 | 代码 段 1 一 | 代码 段 4 处 补充 完整 。 
程序 清单 6-4: 


extern function validate () ( 
// 验 证 格式 是 否 正确 

var frmusername- String.trim(WMLBrowser.getVar ("username")); 
// 获取 表单 的 用 户 名 

var frmpassword- String.trim(WMLBrowser.getVar ("password")); 
// 获 取 表 单 的 密码 

Var frmemail- String.trim(WMLBrowser.getVar ("email")); 
// 获 取 表 单 的 email 

* 93° 


var frmname- String.trim(WMLBrowser.getVar ("name")); 


// 获 取 表 单 的 name 
var frmbirthday= String.trim (WMLBrowser.getVar ("birthday")); 
// 获 取 表 单 的 出 生日 期 
if (frmusername-- "")( 
// 判 断 用 户 是 否 为 空 
WMLBrowser.setVar ("errorMsg", " 用 户 名 不 能 为 空 "); 
WMLBrowser.refresh(); 


return; 


if (frmpassword-- "")( 
// 判 断 密码 是 否 为 空 
WMLBrowser.setVar ("errorMsg", "密码 不 能 为 空 "); 
WMLBrowser.refresh(); 


return; 


if (frmemail: 


// 判 断 email 是 


m") 
BIZ 

WMLBrowser.setVar ("errorMsg", "Email 不 能 为 空 "); 
WMLBrowser.refresh(); 


return; 


代码 段 


* 补充 代码 ,处 理 判断 密码 是 否 长 度 小 于 8， 

如 果 长 度 小 于 8 个 字符 ,返回 validateForm.wml 页 面 并 传 回 "密码 长 
* 度 不 能 小 于 8 个 字符 ." 信 息 

**/ 


~ 
* 


if (! isEmailValid (frmemail)) { 
// 判 断 email 格式 是 否 正确 
WMLBrowser.setVar ("errorMsg", "Email 的 格式 不 合法 "); 
WMLBrowser.refresh(); 


return; 


if (""!—frmbirthday && ! is DateValid(fmmbirthday) ) { 
// 判 断 出 生日 期 为 空 或 是 否 格式 正确 
WMLBrowser.setVar ("errorMsg", "日 期 格式 不 正确 "); 
WMLBrowser.refresh(); 
return; 
} 


submit form(frmusername, frmpassword, frmemail, frmname, frmbirthday); 
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// 输 入 信息 格式 正确 ,将 数据 发 送 下 一 个 页 面 
$ 


function is DateValid (birthday) { 

// 判 断 日 期 格式 是 否 正确 

代码 段 2 

/[** 

* 补充 代码 ,实现 日 期 格式 是 否 与 YYYYMMDD 格 式 一 致 ， 
是 , 则 返回 true. 

* 否 , 则 返回 false; 

xx / 


) 


function is EmailValid (emailAddr)( 
// 验 证 email 格式 

代码 段 3 
/** 

* 补充 代码 ,实现 email 格式 合法 性 的 验证 ， 
* 合法 ,返回 true, 

* 否则 ,返回 false; 

**/ 


) 


function submit form(frmusername, frmpassword, frmemail, frmname, frmbirthday)( 
// 发 送 表 单数 据 至 success .wm1 
WMLBrowser.setVar ("errorMsg", ""); 
代码 段 4 
/** 
* 补充 代码 ,将 用 户 名 、 密 码 Email We Be H E H 
* 的 信息 发 送 到 下 一 个 页 面 中 。 
*x/ 
WMLBrowser.go ("success .wmL") 
} 


6.4 实验 6.3 XHTML MP 和 WCSS 开发 WAP 应 用 


实验 目的 : 


(1) 了 解 和 掌握 XHTML MP 语法 和 常 使 用 的 标记 。 
(2) 比较 XHTML MP 和 WML 1.x 以 及 WML 2.0 的 不 同 之 处 。 
(3) 了 解 和 使 用 WCSS 设计 WAP 网 页 的 样式 .了 解 设计 样式 的 基本 规则 。 
(4) 结合 XHTML MP 和 WCSS 开发 无 线 应 用 。 
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实验 内 容 : 


(1) 为 某 门户 WAP 网 站 设计 菜单 ,要 求实 现 各 种 类 型 菜单 的 制作 。 
(2) 为 提供 的 心理 测试 素材 设计 ,并 实现 一 个 简单 心理 测试 的 文本 游戏 。 


实验 步骤 : 


练习 1: 菜单 页 面 的 设计 。 

本 次 练习 是 设计 一 个 二 级 菜单 。 第 一 级 菜单 项 有 “新 闻 ”“ 游 戏 ”"“ 股 票 ”"“ 无 线 论 坛 ”、 
“生活 ”。“ 新 闻 ” 菜 单项 的 第 二 级 菜单 有 “时 事 新 闻 ”“ 娱 乐 新 闻 ”“ 财 经 新 闻 ”“ 体 育 新 闻 ”、 
“国际 新 闻 ”;“ 游 戏 ” 菜 单项 导向 的 第 二 级 菜单 有 “RGP 游戏 "“ 动 作 游戏 "“ 益 智 游戏 ”、 
“棋牌 游戏 ”; 其 他 菜单 项 目 为 空 。 要 求 如 下 : 

(1) BS main. xhtml( 代 码 见 程序 清单 6-5) 程 序 定 义 了 用 文本 链接 实现 第 一 级 菜单 ， 
要 求 为 main. xhtml 定义 一 个 样式 表 style. css, 使 得 显示 的 文本 颜色 为 蓝 色 ,并 且 对 应 的 每 
一 个 链接 都 有 快捷 按钮 , 按 数字 “1” 快 速 导 航 到 newmenu. xhtml, 按 数字 “2” 快速 导航 到 
stockmenu. xhtml 网 页 , 按 数字 “3” 快 速 导 航 到 gamemenu. xhtml, 按 数字 “4” 快速 导航 到 
forum. xhtml, 按 数字 “5” 快 速 导 航 到 life. xhtml, 

程序 清单 6-5 : 


< ! DOCTYPE html PUBLIC "- //WAPFORUM//DTD XHTML Mobile 1.0//EN" 
"http: //www.wapforum.org/DTD/xhtml- mobilel0.dtd"» 


<!--main.xhtml--> 

«html xmlns= "http: //www.w3.org/1999/xhtmL"> 

<head> 

«meta http- equiv= "Content-Type" content= "text/html; charset=gb2312"/> 
<title> 文 本 菜单 < /title> 

<link rel="stylesheet" href- "style.css"/> 

< /head» 


<body> 
<div> 
«h4» Xlll WAP 世界 < /h4» 


<table width= "80% "> 
«tr» 

<td><a  class-"control 1" href- "newsmenu.xhtml"» #f [il < /a» « /td» 
«/tr» 
«tr» 

«td»«a class-"control 2" href- "stockmenu.xhtml"» flt < /a» « /td> 
«/tr» 
«tr» 

<td><a class-"control 3" href= "gamemenu.xhtml"» 游戏 </a>< /td> 
«/tr» 
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«tr» 
<td><a class-"control 4" href="forum.xhtml"> 无 线 论坛 </a>< /td» 
</tr> 
<tr> 
<td><a class-"control 5" href-"life.xhtml'» Ei </a></td> 
</tr> 
</table> 


</div> 

</body> 

</html> 

考虑 自行 设计 图 标 ,为 main. xhtml 网 页 的 每 一 个 菜单 项 增加 一 个 图 标 。 菜 单项 仍 是 
分 行 显示 。 修 改 style. css, 要 求 为 所 有 的 图 标 设置 大 小 : 宽 和 高 均 为 8px。 

注意 : WCSS 的 软 键盘 -wap-accesskey 属性 只 对 4 个 元 素 avinput label 和 textarea 发 
生 作 用 ,对 于 其 他 元 素 是 无 效 的 。 

(2) 编写 newmenu. xhtml 网 页 ,该 网 页 用 选择 列表 定义 “新 闻 ” 的 二 级 菜单 实现 ,运行 
结果 类 似 图 6-26。 


2.2 $ Openwave SDK 6.2.2 [BK 
File Edit View Tools Help File Edit View Tools Help 


io | fle: //e: #5 AWEB-S SCR S /source/che ie file://e:/ 书 WEB8 书 实验 指导 /source/chs m | 


图 6-26 新 闻 的 选择 列表 二 级 菜单 图 6-27 游戏 的 有 序列 表 二 级 菜单 


(4) 将 上 述 类 型 的 菜单 用 WML 2.0 重新 编写 ,比较 WML 2.0 与 XHTML Mobile 之 
间 的 异同 。 

BA, 比较 上 述 4 种 类 型 的 菜单 的 异同 , 写 出 4 种 不 同 菜单 的 特点 。 并 分 析 在 实际 无 
线 应 用 中 菜单 设计 的 决定 因素 是 什么 。 
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练习 2: 设计 并 实现 一 个 趣味 心理 游戏 。 

设计 一 个 趣味 心理 游戏 ,游戏 由 10 个 题目 构成 ,通过 回答 不 同 答案 导向 不 同 的 页 面 ,最 
终 得 出 测试 的 结果 。 提 供 素材 的 “心理 测试 题 . txt”"。 要 求 游戏 设计 合理 ,并 为 游戏 设计 合 
理 的 文字 ,布局 .图 片 等 样式 ,界面 设计 可 用 性 好 。 

操作 步骤 略 。 
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9887 8 JSP 开发 的 Java 语言 基础 


在 JSP 开发 中 ,几乎 所 有 的 服务 器 端 动态 功能 都 需要 用 Java 语言 来 实现 ,JSP 开发 中 
的 JavaBean、Servlet、Struts 等 功能 的 实现 基础 也 是 Java 语言 。 所 以 能 否 熟 练 地 编写 Java 
程序 关系 到 能 否 高 效 地 进行 JSP 开发 。 本 章 就 基本 的 Java 语言 设计 相关 实验 ,力求 读者 通 
过 这 些 实验 检验 自己 的 Java 编程 能 力 ,为 以 后 的 Web 程序 设计 打 好 基础 。 


7.1 预备 知识 


7.1.1 Java 简介 


Java 语言 是 由 Sun Microsystems 公司 开发 的 一 种 面向 对 象 程序 设计 语言 ,Java 语言 吸 
收 了 Smalltalk 语言 和 C++ 语言 的 优点 ,并 增加 了 其 他 特性 ,如 支持 并 发 程序 设计 、 网 络 通 
信和 多 媒体 数据 控制 等 。 主 要 特性 如 下 : 

(1) Java 语言 是 简单 的 。 

(2) Java 语言 是 面 对 对 象 的 。 

(3) Java 语言 是 分 布 的 。 

(4) Java 语言 是 健壮 的 。 

(5) Java 语言 是 安全 的 。 

(6) Java 语言 是 体系 结构 中 立 的 。 

(7) Java 语言 是 可 移植 的 。 

(8) Java 语言 是 解释 型 的 。 

(9) Java 语言 是 高 性 能 的 。 

(10) Java 语言 是 多 线程 的 。 

(D Java 语言 是 动态 的 。 


.1.2 Java 的 基本 语法 


1. 数据 类 型 

Java 支持 多 种 数据 类 型 ,它们 可 以 用 来 声明 变量 、 创 建 数组 以 及 其 他 更 复杂 的 数据 结 
o Java 的 数据 类 型 如 图 7. 1 所 示 。 

2. 数组 

在 Java 程序 设计 中 ,可 以 用 数组 来 表示 一 些 相 关 的 数据 。 数 组 是 多 个 数据 项 的 有 序 集 
,其 中 的 每 个 数据 项 称 为 数组 的 元 素 。 在 Java 程序 中 ,数组 具有 下 列 特点 。 

(1) 同一 数组 中 的 所 有 元 素 均 属于 相同 的 数据 类 型 ,该 数据 类 型 称 为 数组 的 基本 类 型 。 

(2) 数组 一 经 创建 ,其 元 素 个 数 就 保持 不 变 , 这 个 长 度 称 为 数组 的 长 度 。 

(3) 数组 中 的 每 一 个 元 素 均 能 借助 于 下 标 (index) 来 访问 。 


M 


= 


op 
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整 型 (byte ~ short ~ int filong) 
[sin H 


浮 点 型 (float 和 double) 
简单 数据 类 型 一 =| 字符 型 (char) 
一 | 布尔 型 (boolean) 
mys 
| 复合 数据 类 型 |] 接口 
一 | 数组 


数据 类 型 


图 7-1 Java 数据 类 型 


(4) 数组 元 素 的 类 型 既 可 以 是 简单 数据 类 型 (如 int 和 float 等 ) ,也 可 以 是 复合 类 型 (如 
String、Object, 其 至 数组 类 型 )。 元 素 类 型 如 果 属 于 简单 数据 类 型 则 每 个 元 素 都 为 一 个 值 ， 
如 果 属 于 复合 类 型 则 每 个 元 素 是 一 个 对 象 。 

在 Java 语言 中 的 数组 按照 以 下 方式 声明 .创建 和 引用 。 

CD 声明 形式 如 下 : 


type[] []… arrayName; 
或 者 
type arrayName[] []… 


(2) 创建 。 声 明 数 组 时 ,并 没有 为 其 中 的 元 素 分 配 存储 空间 ,而 要 等 到 创建 数组 的 时 候 
才 真正 为 它们 分 配 存储 空间 。 在 Java 中 ,数组 的 创建 必须 使 用 new FRE FF : 

arrayName- new elementType[ARRAY SIZE1] [ARRAY SIZE2]… 

(3) 引用 。 利 用 数组 的 下 标 来 使 用 数组 元 素 : 

arrayName [index1] [index2]… 

3. 常用 运算 

Java 语言 中 ,运算 符 可 以 划分 为 四 大 类 : 算术 运算 符 、 关 系 运 算 符 、 位 运算 符 以 及 逻辑 

4. 控制 语句 

Java if AP. Re if HA) switch 语句 for 语句 、while 和 do…while 语句 来 控制 程序 结 
构 , 这 些 语 名 的 语法 和 C、C++ 语言 基本 一 致 。 


7.1.3 Java 面向 对 象 编程 基础 


Java 是 一 种 纯粹 的 面向 对 象 程序 设计 语言 ,在 Java 中 ,所 解决 问题 中 的 所 有 的 东西 都 
是 对 象 , 所 以 Java 编程 实际 上 就 是 对 类 和 对 象 的 编程 。 
1. 类 和 对 象 
Java 语言 中 ,定义 一 个 类 的 语法 形式 如 下 : 
class 类 名 { 
成 员 属 性 ; 
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成 员 方法 ; 
} 


Java 语言 中 ,需要 为 类 创建 对 应 的 实例 对 象 才 能 使 用 ,创建 对 象 的 语法 形式 如 下 : 
类 名 对 象 名 =new 类 名 ([ 参 数列 表 ]); 


2. 继承 性 

在 Java 中 ,通过 继承 , 子 类 拥有 父 类 的 所 有 成 员 , 包 括 成 员 变量 和 成 员 方 法 ,一 个 类 A 
继承 另 一 个 已 存在 的 类 B 的 语法 形式 如 下 : 

class A extends B { 

成 员 列 表 ; 

} 

注意 : Java 语言 只 支持 单 继承 ,不 允许 多 继承 。 

3. & 

Java 语言 引入 包 (package) 的 机 制 使 得 Java 更 易于 层次 化 地 组 织 大 型 的 Java 程序 。 

定义 包 的 语句 格式 : 


package 程序 包 名 ; 
引用 包 的 语句 格式 : 
import &14; 


4. 接口 
Java 是 不 支持 多 继承 的 ,但 是 Java 可 以 通过 实现 接口 (interface) 来 实现 多 继承 。 接 口 
是 一 种 特殊 的 抽象 类 ,这 种 抽象 类 中 只 包含 常量 和 方法 的 声明 ,而 没有 变量 和 方法 的 实现 。 
接口 的 声明 语法 形式 : 
interface 接口 名 { 
成 员 列 表 ; 
} 


接口 的 实现 语法 形式 : 
class 类 名 implements 接口 名 


5. 多 态 性 

多 态 性 就 是 程序 中 同一 个 符号 在 不 同 的 情况 下 具有 不 同 的 意义 。 

多 态 性 分 为 编译 时 多 态 性 和 运行 时 多 态 性 ,编译 时 多 态 叫 静态 绑 定 ,由 简单 的 方法 重 载 
实现 。 运 行 时 多 态 也 叫 动态 绑 定 。 多 态 性 的 原理 是 在 程序 运行 期 间 判 断 所 引用 对 象 的 实际 
类 型 ,根据 其 实际 类 型 调用 相应 的 方法 。 多 态 的 存在 必须 具备 3 个 条 件 。 

CD 有 继承 。 程 序 中 存在 子 类 对 父 类 的 继承 (包括 实现 接口 )。 

(2) 有 履 盖 。 子 类 必须 对 父 类 中 的 必要 方法 进行 重 写 ,以 实现 自己 需要 的 功能 。 

(3) 父 类 引用 指向 子 类 对 象 。 程 序 调 用 的 必须 是 父 类 ,而 实际 上 编译 器 却 调用 子 类 的 
对 象 。 
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7.1.4 Java 的 异常 处 理 


1, 异常 与 异常 类 

异常 就 是 程序 运行 过 程 中 遇 到 的 错误 ,使 程序 运行 中 止 , 或 者 即使 程序 能 够 继续 运行 ， 
但 得 出 错误 的 结果 其 至 导致 严重 的 后 果 。 引 入 异常 处 理 机 制 后 ,异常 处 理 就 可 以 使 用 统一 
的 语句 和 接口 ,使 错误 处 理 更 方便 、 更 安全 。 

Java 语言 中 通过 定义 异常 类 来 表示 各 种 错误 。 

Exception: 所 有 异常 类 的 父 类 ,其 子 类 对 应 各 种 各 样 可 能 出 现 的 异常 事件 ,一 般 需 要 
用 户 显 式 地 声明 或 捕获 。 

其 他 异常 类 中 比较 常见 的 有 IOException, InterruptedException、ClassNotFoundException、 
DataFormatException, SQLException 等 。 

2. 异常 的 抛 出 

Java 程序 的 执行 过 程 如 出 现 异常 事件 ,可 以 生成 一 个 异常 类 对 象 ,该 异常 对 象 封 装 了 
异常 事件 的 信息 并 将 被 提交 给 Java 运行 时 系统 ,这 个 过 程 称 为 抛 出 (throw) 异 常 。 

异常 抛 出 的 语法 形式 : 


throw 异常 类 对 象 ; 


3. 捕获 异常 

当 Java 运行 时 系统 接收 到 异常 类 对 象 时 ,会 寻找 能 处 理 这 一 异常 的 代码 并 把 当前 异常 
对 象 交 其 处 理 , 这 一 过 程 称 为 捕获 (catch) 异 常 。 

异常 捕获 的 语法 结构 如 下 (try catch finally): 


try { 
可 能 出 现 特定 异常 的 代码 ; 
} catch() ( 
处 理 异常 的 语句 1; 
} catch() { 
处 理 异常 的 语句 2; 
} 


finally { 
最 终 执行 的 语句 ; 
} 


7.1.5 Java 的 多 线程 


1. 多 线程 的 定义 
Java 语言 支持 多 线程 的 程序 ,多 线程 编程 是 指 将 程序 任务 分 成 几 个 并 行 的 子 任务 ,由 
这 些 子 任务 并 发 执行 ,一 起 协作 完成 程序 的 功能 。 多 线程 的 执行 是 并 发 的 , 即 在 逻辑 上 是 
“同时 ”的 ,而 不 管 是 否 是 物理 上 的 “同时 ”。 
在 Java 语言 中 ,线程 的 创建 可 以 用 两 种 方法 ,第 一 种 是 定义 Thread 的 子 类 , 另 一 种 是 
实现 Runnable 接口 。 
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(1) 继承 Thread 类 并 重 定义 run() 方 法 。 定 制 一 个 线程 在 运行 时 执行 的 代码 ,可 以 通 
过 定义 一 个 Thread BW FA ,并重 定 义 从 Thread 中 继承 过 来 的 run() 方 法 ,使 之 执行 指定 
的 代码 。run() 方 法 是 Thread 中 定义 的 一 个 空 方法 ,定义 格式 如 下 : 


class MyThread extends Thread ( 
public void run() (^) / [E run Jr ik 
} 
当 启 动 一 个 新 线程 时 ,run() 方 法 中 的 第 一 条 语句 就 是 新 线程 将 执行 的 第 一 条 语句 。 线 
程 启动 的 代码 如 下 : 


MyThread myThread- new MyThread (… ) 7 

Thread t- new Thread (myThread) ; 

t.start(); 

(2) 定义 线程 类 实现 Runnable 接口 。Runnable 接口 中 只 有 一 个 run 方法 ,任何 类 只 要 
实现 了 Runnable 接口 ,系统 就 会 自动 识别 出 它 为 一 个 线程 类 。 定 义 的 格式 如 下 : 


class MyThread implements Runnable { 
public void run() {++} / PRE run Jj ik 
) 


启动 新 线程 的 方法 与 上 面相 同 。 

2. 线程 的 生命 周期 

从 创建 一 个 新 线程 到 这 个 线程 消亡 (或 终止 ) 的 时 间 段 称 为 线程 的 生命 周期 。 在 整个 生 
命 周期 中 ,由 于 受到 外 界 或 线程 自身 需要 的 影响 ,线程 表现 出 5 种 不 同 的 状态 。 

(1) 创建 状态 。 

(2) 可 运行 状态 。 

(3) 运行 中 状态 。 

(4) 阻塞 状态 。 

(5) 死亡 状态 。 

3. 线程 的 优先 级 

线程 的 优先 级 用 数字 表示 ,范围 为 1 一 10, 一 个 线程 的 默认 优先 级 是 5。 线 程 类 中 用 3 
个 常量 记录 3 种 不 同 的 优先 级 : Thread. MIN. PRIORITY, Thread. MAX, PRIORITY 和 
Thread. NORM_PRIORITY ,它们 分 别 对 应 优先 级 1、10 和 5。 


7.2 实验 7.1 Java 的 异常 处 理 


实验 目的 : 


d) 掌握 Java 中 异常 处 理 机 制 。 
(2) 熟悉 try…catch…finally 语句 结构 和 捕 提 处 理 异常 的 方法 。 
(3) 了 解 有 异常 处 理 和 没有 异常 处 理 的 区 别 。 
(4) 多 重 catch 语句 的 使 用 。 
* 103 + 


实验 内 容 : 


本 次 实验 训练 读者 掌握 Java 的 异常 和 异常 处 理 方法 ,实验 完成 了 一 个 基于 GUI 的 除 
法 运算 ,要 求 读者 分 析 并 处 理 其 中 的 异常 情况 。 本 实验 由 3 个 练习 构成 。 

CL) 分 析 程 序 ,分析 除 法 运算 代码 中 的 异常 情况 。 

(2) 为 了 增加 程序 的 健壮 性 ,利用 try…catch 处 理 异常 。 

(3) 设计 人 性 化 的 异常 处 理 代码 ,提示 用 户 程 序 中 出 现 异常 的 原因 。 


实验 步骤 : 


练习 1. 分 析 程 序 ,分 析 除 法 运算 代码 中 的 异常 情况 。 
如 图 7-2 ,运行 并 测试 程序 lab7_1_1. java, 测 试 20/10,20/0,20/abc 看 这 个 程序 是 否 会 
产生 异常 ;会 产生 哪些 异常 ;程序 有 没有 对 异常 进行 处 理 ; 一 E 


旦 出 现 异 常 将 会 对 程序 的 执行 造成 什么 样 的 影响 ? | 


//1ab] 1 1.java 图 7-2 Java 除法 计算 
import java.awt.* ; 


B 


import java.awt.event.* ; 


import javax.swing. * ; 


public class Lab7 1 1 extends JFrame ( 
private JTextField jtfNuml, jtfNum2, jtfResult; 
private JButton jbtDiv- new JButton ("Divide"); 


public Lab7 1 1() { 
JPanel pl-new JPanel(); 
pl.setLayout (new FlowLayout ()); 
pl.add (new JLabel ("被 除数 ")); 
pl.add (jtfNuml- new JTextField(3)); 
pl.add (new JLabel ("除数 ")); 
pl.add (jtfNum2- new JTextField(3)); 
pl.add (new JLabel ("E € ")) ; 
pl.add (jtfResult-new JTextField(4)); 
jtfResult.setEditable (false); 
jtfResult.setHorizontalAlignment (SwingConstants.RIGHT); 
this.getContentPane () .add (p1, BorderLayout .CENTER) ; 
this.getContentPane ().add(jbtDiv, BorderLayout .SOUTH) ; 
jbtDiv.addActionListener (new ActionListener () { 
public void actionPerformed (ActionEvent e) { 
handleDivide (e); 
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private void handleDivide (ActionEvent e) { 
if (e.getSource() ==jbtDiv) { 
int numl- Integer.parseInt (jtfNuml.getText () .trim()) ; 
int num2- Integer.parseInt (jtfNum2.getText () .trim()) ; 
int result-numl / num2; 
jtfResult.setText (String.valueOf (result)); 


public static void main (String[] args) ( 
Lab7 1 1 exe=new Lab7 1 10); 
exe.pack(); 
exe.setDefaultCloseOperation (JFrame.EXIT ON CLOSE); 


exe.setVisible (true); 


) 


练习 2: 利用 try catch 处 理 异常 。 

为 了 能 够 处 理 20/0 或 者 20/abc 时 出 现 的 异常 ,在 练习 1 中 lab7_1_1. java 代码 加 入 处 
理 异常 的 try…catch 块 ,修改 好 的 代码 程序 见 清 单 7-2 ,分析 并 运行 程序 lab7_1_2. java, [Al 
答 执 行 20/0 和 20/abc 时 程序 是 否 还 会 出 现 异常 ,一 旦 出 现 异常 将 会 对 程序 的 执行 造成 什 
么 样 的 影响 ? 

程序 清单 7-2: 


//Lab] 1 2.java 
import java.awt.* ; 
import java.awt.event.* ; 


import javax.swing. * ; 


public class Lab7 1 2 extends JFrame ( 
private JTextField jtfNuml, jtfNum2, jtfResult; 
private JButton jbtDiv- new JButton ("Divide"); 


public Lab7 1 2() ( 
JPanel pl=new JPanel (); 
pl.setLayout (new FlowLayout () ) 7 
pl.add (new JLabel ("被 除数 ")); 
pl.add(jtfNuml- new JTextField(3)); 
pl.add (new JLabel ("BRAK") ) ; 
pl.add(jtfNum2-new JTextField(3)); 
pl.add (new JLabel ("V 3E ") ) ; 
pl.add(jtfResult- new JTextField(4)); 
jtfResult.setEditable (false); 
jtfResult.setHorizontalAlignment (SwingConstants.RIGHT); 
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this.getContentPane ().add(pl, BorderLayout .CENTER) ; 
this.getContentPane () .add(jbtDiv, BorderLayout .SOUTH) ; 


jbtDiv.addActionListener (new ActionListener () { 
public void actionPerformed (ActionEvent e) { 
handleDivide (e) ; 


n; 


private void handleDivide (ActionEvent e) ( 
if (e.getSource() ==jbtDiv) ( 

try { 
int numl= Integer .parseInt (jtfNuml.getText () .trim()); 
int num2- Integer .parseInt (jt fNum2.getText () .trim()); 
int result-numl / num2; 
jtfResult.setText (String.valueOf (result)); 

) catch (Exception ex) ( 

) 


) 
public static void main (String[] args) ( 
Lab7 1 2 exe- new Lab7 1 20; 
exe.pack(); 
exe.setDefaultCloseOperation (JFrame .EXIT ON CLOSE); 


exe.setVisible (true); 


) 


练习 3: 设计 人 性 化 的 异常 处 理 代 码 ,提示 用 户 程序 中 出 现 异常 的 原因 。 

练习 2 中 的 程序 仅仅 只 是 完成 了 异常 的 捕 提 ,没有 处 理 异 常 , 这 样 可 以 防止 程序 中 出 现 
异常 影响 程序 的 正常 运行 。 请 判断 并 写 出 练习 2 中 出 现 的 异常 类 型 。 

修改 练习 2 中 的 程序 Lab7_1_2. java, 增 加 可 能 会 出 现 异常 的 处 理 代 码 , 即 填充 下 列 的 
程序 清单 7-3 中 | 代码 了 一 | 代码 和 ,使 得 运行 结果 如 图 7-3 所 示 。 在 实验 2 中 加 入 程序 清 
单 7-3 所 示 代 码 。 

程序 清单 7-3: 


private void handleDivide (ActionEvent e) { 
if (e.getSource()-- jbtDiv) { 
try { 
int numl= Integer .parseInt (jtfNuml.getText () .trim())7 
int num2= Integer .parseInt (jt fNum2.getText () .trim()) ; 
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int result-numl/num2; 

jtfResult.setText (String.valueOf (result)); 
) catch (代码 1|) ( 
代码 2j; 
} catch (R 3]) { 
HR 4] 


) 


保存 新 的 代码 为 Lab7_1_3. java, 运 行 并 测试 程序 ,可 以 观察 到 如 图 7-3. 所 示 的 执行 
效果 。 


B DoK 
mea |20 eaf ”| 答案 2 


Divide 


(a) 正确 执行 的 效果 


Warning 


B 加 el 四 A samma 


被 除数 |20 | 除数 sx 2 


(b) 当 除 数 是 0 时 报错 的 情况 
¥arning 


[- (Ex) AX arrestin. REAA 


被 除数 |20 | m [ane | 答 家 2 
moe 
Divide smani 


(c) 数字 格式 错误 报错 的 情况 
图 7-3 Java 异常 处 理 


7.3 实验 7.2 Java 的 多 线程 处 理 


实验 目的 : 


(1) 掌握 Java 中 多 线程 程序 的 原理 。 
(2) 熟悉 利用 Thread 或 Runnable 实现 多 线程 程序 的 方法 。 
(3) 了 解 线程 的 生命 周期 。 
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实验 内 容 : 


本 次 实验 训练 读者 掌握 Java 的 多 线程 编程 方式 ,实验 由 两 个 练习 构成 。 

(1) 编写 程序 ,生成 一 个 蓝 色 的 反弹 球 , 每 当 碰 到 边框 的 时 候 , 被 弹 起 并 沿 反方 向 运动 。 

(2) 修改 上 面 的 程序 ,人 允许 用 户 增 加 或 减少 新 的 球 。 最 多 提供 20 个 球 ,为 每 个 球 随机 
选择 颜色 。 


实验 步骤 : 


练习 1. 编写 程序 ,生成 一 个 蓝 色 的 反弹 球 ,每 当 碰 到 边框 的 时 候 ,被 弹 起 并 沿 反 方向 运动 。 
(1) 启动 Java 开发 环境 ,新 建 一 个 文件 Lab7_2_1. java, 将 程序 清单 7-4 代码 输入 。 
程序 清单 7-4: 


//Lab] 2 1.java 
import java.awt.* ; 
import javax.swing. * ; 
import javax.swing.border.LineBorder; 
public class Lab7 2 1 extends JFrame ( 
public Lab7 2 1(String title) ( 
super (title); 
this.getContentPane () .add (new BallJumpPan () ) 7 
this.pack(); 
) 
public static void main (String args[]) { 
Lab] 2 1 exe-new Lab7 2 1(" 多 线程 实验 "); 
exe.setDefaultCloseOperation (JFrame .EXIT ON CLOSE); 
exe.setVisible (true); 
) 
private class Ball { 
int xb, yb; 
int vx, vy; 
boolean state-true; 
final int W-5, H=5; 
Color color; 
public Ball(int x, int y) ( 
xb-x; 
yb-y:; 
vx-- (int) (Math.random() * 1045); 
vy-- (int) (Math.random() * 1045); 


color=Color.BLUE; 


H 
private class BallJumpPan extends JPanel implements Runnable { 
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Ball ball; 
Thread ballThread; 
int time, count; 
int mv- 30; 
public BallJumpPan() ( 
// 设置 边框 大 小 和 颜色 
this.setPreferredSize (new Dimension (400, 300)); 
this.setBackground (Color.black); 
this.setBorder (new LineBorder (Color.WHITE)); 
// 设置 小 球 的 运动 速度 
time- 50; 
count= 0; 
ball-new Ball(200, 150); 
// 启动 运动 线程 
ballThread- new Thread (this); 
ballThread.start (); 
) 
public void paint (Graphics g) ( 
super.paint (g); 
g.setColor (ball.color); 
g.fillOval(ball.xb, ball.yb, 20, 20); 
) 
// 线程 启动 后 执行 
public void run() ( 
while (true) ( 
repaint(); 
if (ball.xb> 380 || ball.xb<0) { 
ball.vx--ball.vx; 
) 
if (ball.yb<0 || ball.yb>280) ( 
ball.vy--ball.vy; 
H 
ball.xb*-ball.vx; 
ball.yb*-ball.vy; 
try { 
Thread.sleep (time); 
) catch (InterruptedException e) ( 
} 
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(2) 保存 程序 后 运行 并 调试 程序 ,得 到 如 图 7-4 所 示 的 运行 效果 。 


图 7-4 Java BH 


运行 效果 


练习 2: 修改 上 面 的 程序 ,允许 用 户 增加 或 减少 新 的 球 。 最 多 提供 20 T ER ,为 每 个 球 随 
机 选择 颜色 。 

具体 要 求 是 ; 修改 上 述 代 码 Lab7_2_1. java,; 在 其 中 加 入 一 个 按钮 面板 btPanel, 并 在 其 
中 加 入 两 个 按钮 btAddBall、btReduceBall, 分 别 用 于 实现 运动 小 球 的 增加 和 减少 ,并 控制 4 
球 个 数 最 多 20 个, 最少 0 个。 新 建 一 个 Java 文件 Lab7_2_2. java, 结 合 Lab7_2_1. java 将 如 
下 程序 清单 7-5 输入 并 保存 。 仔 细 阅 读 程序 清单 7-5, 将 程序 清单 7-5 中 的 | 代码 了 ~ 
代码 8| 补 充 完整 ,实现 题 意 要 求 。 

程序 清单 7-5: 


V 


//Lab7 2 2.java 

import java.awt.* ; 
import java.awt.event.* ; 
import javax.swing. * ; 


import javax.swing.border.LineBorder; 


public class Lab7 2 2 extends JFrame ( 


private BallJumpPan ball1Panel=| {N45 1|; 
// 创 建 显示 小 球 运动 的 面板 
Private BtPan btPane1- [fi 2] A 
// 创 建 按钮 面板 


public Lab7 2 2(String title) { 
super (title); 


this.getContentPane () .add (4&8 3| , BorderLayout .CENTER) ; 


this.getContentPane () .add (| 代码 到 | , BorderLayout .SOUTH) ; 
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// 将 面板 ballPanel 和 btPanel 分 别 放置 在 显示 窗口 内 


public static void main (String args[]) { 
Lab7 2 2 exe=new Lab7 2 2(" 多 线程 实验 "); 
exe.setDefaultCloseOperation (JFrame.EXIT ON CLOSE); 


exe .pack () 7 


exe.setVisible (true); 


private class Ball ( 
int xb, yb; 


int vx, vy; 


boolean state- true; 


final int W-5, H-5; 


Color color; 


public Ball(int x, int y) { 


xb-x; 
yb-y; 


vx-- (int) (Math.random() * 1045); 
vy-- (int) (Math.random() * 10+ 5); 
color=new Color((int) (Math.random() * 255), 
(int) (Math.random() * 255), (int) (Math.random() * 255)); 


private class BallJumpPan extends JPanel implements Runnable ( 


Ball[] ball; 


Thread ballThread; 


int time, count; 


int mv= 30; 


public BallJumpPan() { 


// 设置 边框 大 小 和 颜色 

this.setPreferredSize (new Dimension (400, 300)); 
this.setBackground (Color.black); 
this.setBorder (new LineBorder (Color.WHITE)); 
// 设置 小 球 的 运动 速度 


time- 50; 


count- 0; 


ball-new Ball[20]; 


ballThread — 


代码 5 
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// 创 建新 线程 
代码 6|; 
// 启 动 线程 ballThread 


public int getCount () ( 


return count; 


public void paint (Graphics g) ( 
super.paint (g) ; 
for (int i=0; i«count; i++) ( 
g.setColor (ball[i].color); 
g.fillOval(ball[i].xb, ball[i].yb, 20, 20); 


public void run() ( 
while (true) ( 
代码 7|; 
// 重 新 绘制 窗口 
for (int i=0; i<count; i++) { 
if (ball[i].xb» 380 || ball[i].xb<0) { 
ball[i].vx--ball[i].vx; 


} 
if (ball[i].yb« O || ball[i].yb» 280) { 
ball[i].vy--ball[i].vy; 
) 
ball[i].xb +=ball[i] .vx; 
ball [i] .yb +=ball[i] .vy; 
} 
try { 


Rm sj; 

// 设 置 线程 休眠 时 间 为 time 
) catch (InterruptedException e) { 
) 


public void addBall() { 
if (count«20) ( 
ball [count+ + ]=new Ball(200, 150); 
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public void reduceBall() ( 
if (count>0) ( 
ball[-- count]-null; 


private class BtPan extends JPanel { 
private JButton btAddBall, btReduceBall; 
private JLabel jlNumber; 


public BtPan() ( 
btAddBall-new JButton ("增加 "); 
btReduceBall- new JButton ("减少 "); 
jlNumber- new JLabel (ballPanel.getCount ()- "/20") ; 
this.setLayout (new GridLayout (1, 3, 10, 10)); 
this.add (btAddBall); 
this.add (btReduceBall); 
this.add(jlNumber); 
if (ballPanel.getCount ()==0) 
btReduceBall.setEnabled (false); 
if (ballPanel.getCount ()== 20) 
btAddBall.setEnabled (false); 
// 动作 监听 
btAddBall.addActionListener (new ActionListener() ( 
public void actionPerformed (ActionEvent argO) ( 
ballPanel .addBall () ; 
btReduceBall .setEnabled (true); 
if (ballPanel.getCount ()==20) 
btAddBall.setEnabled (false); 
jlNumber .setText (ballPanel.getCount ()+"/20") ; 


nz 
btReduceBall.addActionListener (new ActionListener() ( 
public void actionPerformed (ActionEvent e) { 
ballPanel.reduceBall (); 
btAddBall.setEnabled (true); 
if (ballPanel.getCount ()==0) 
btReduceBall.setEnabled (false); 
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jlNumber . set Text (ballPanel.getCount () * "/20") ; 


) 
填充 并 保存 代码 后 ,运行 并 调试 程序 ,检查 是 否 能 得 到 如 图 7-5 所 示 的 运行 效果 。 


图 7-5 Java 多 线程 程序 运行 效果 
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第 8 章 JSP (E 7T 


JSP(Java Server Pages) 现 在 已 经 成 为 主流 的 Web 程序 开发 技术 之 一 , 它 具备 了 跨 平 
台 、 通 用 性 好 、 安 全 可 靠 等 特点 。 在 本 章 将 概括 介绍 ISP 的 基本 语法 以 及 设计 相关 的 实验 ， 
帮助 读者 开始 使 用 JSP 开发 应 用 。 


8.1 预备 知识 


8.1.1 JSP 的 变量 、 方 法 与 表达 式 
1. 变量 和 方法 
JSP 中 变量 和 方法 的 声明 语法 如 下 : 
<% 1! 声明 语 句 1; 


声明 语句 2; 


声明 语句 n 


$> 


2. 表达 式 
JSP 的 表达 式 是 由 变量 .常量 和 运算 符 组 成 的 式 子 , 它 可 以 将 计算 结果 转换 成 字符 串 直 
接 在 页 面 中 输出 。 表 达 式 的 语法 格式 如 下 : 


<$= 表 达 式 %$> 


8.1.2 JSP 注释 元 素 

JSP 中 的 注释 可 以 分 为 两 类 : 一 类 是 在 客户 端 可 见 的 注释 ,我 们 可 以 称 其 为 HTML 注 
释 ; 还 有 一 类 是 客户 端 不 可 见 的 注释 ,这 类 注释 有 隐藏 注释 以 及 脚本 代码 中 的 注释 。 

1. HTML 注释 

其 语法 格式 如 下 : 

<!- -注释 语句 <s= 表 达 式 s>--> 

2. 隐藏 注释 

其 语法 格式 如 下 : 

«s--IERIBA--s» 

3. 脚本 代码 的 注释 

其 语法 格式 如 下 : 


«S / AE TES S > 
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<%/* 注释 语句 x* /5» 


8.1.3 JSP 指令 元 素 
常用 的 ISP 指令 有 include 指令 、page 指令 和 taglib 指令 。 指 令 元 素 的 语法 格式 如 下 : 
«sed c 属性 名 1= "属性 值 1", 属性 名 2=" 属 性 值 2",… %> 


1. include 指令 

include 指令 用 来 在 当前 JSP 页 面 中 加 载 需 要 插入 的 文本 或 代码 文件 ,这 些 加 载 的 代码 
将 和 原 有 的 JSP 代码 合并 成 一 个 新 的 JSP 文件, 并 由 JSP 引擎 编译 后 执行 。 

其 语法 格式 如 下 : 


<$@include file=" 相 对 路 径 " +> 


2. page 指令 

page 指令 用 来 定义 整个 JSP 页 面 要 使 用 的 属性 ,如 所 使 用 的 脚本 语言 .要 导入 的 包 文 
件 、 错 误 处 理 方法 等 等 。 

它 的 语法 格式 如 下 : 


< $80 page 

language- "java"] 
import-"(package.class|package. * ), ..."] 
extends- "package.class"] 

contentType- "text/html;charset- ISO- 8859- 1" | "mimeType[;charset- CHARSET]"] 
session- "True | False"] 

buffer- "none | 8kb | size kb"] 
autoFlush- "Ture | False"] 

isThreadSafe- "True | False"] 

info- "text"] 

errorPage- "relativeURL"] 


isErrorPage- "True | False"] 
5» 


3. taglib 指令 
taglib 指令 用 于 用 户 自 定义 标签 库 以 及 标记 的 前 级 。 
其 语法 格式 如 下 : 


«$8 taglib uri= "taglibURI" prifex= "tagPrefix" $» 


8.1.4 JSP 动作 元 素 


常用 的 JSP 动作 包括 二 jsp: param >, < jsp: include >, — jsp: useBean >, < jsp: 
setProperty> ,<jsp:getProperty> .<jsp:forward>#il<jsp: plugin 二 等 。 
1, <jsp:param> Zh 4E 
<jsp:param> Zl E AKA JSP 页 面 的 其 他 标记 提供 附加 信息 ,通常 它 以 “名 / 值 ”的 方 
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式 传递 到 页 面 中 ,其 语法 格式 如 下 : 
« jsp:param name- "参数 名 " value= "参数 值 "/> 


2. <jsp:include> z/ E 
<jsp:include> ll fF FAK fe ^E n f] Web 页 面 中 插入 指定 的 文件 。 
其 语法 格式 如 下 : 


<jsp:include page= "文件 名 " flush= "true"/> 


« jsp:include page- "文件 名 "flush= "true"» 

« jsp:param name- "参数 名 1" value- "参数 值 1"/> 

« jsp:param name- "参数 名 2" value- "参数 值 2"/> 

< /jsp:include» 

3. <jsp:setProperty > Z/ 4E , —jsp:getProperty > 2) fE $1 — jsp: useBean > Zh 4E 

(1) <jsp:setProperty >E., <jsp:setProperty >a EF fI — jsp: useBean> 3l fE— 
起 使 用 的 ,用 来 设置 Bean 的 属性 值 ,其 语法 格式 如 下 : 

<jsp:setProperty name- "Bean 的 名 字 " property-" * "/» 
或 

<jsp:setProperty name= "Bean 的 名 字 " property- "属性 名 " [param "参数 名 "] /> 
或 

<jsp:setProperty name- "Bean 的 名 字 " property- "属性 名 " value= "属性 值 "/> 

(2) <jsp:getProperty 二 动作 。 志 jsp:getProperty 二 动作 也 是 和 二 jsp:useBean 二 动 
作 一 起 使 用 ,用 来 获取 Bean. 中 属性 的 值 ,所 得 到 的 值 会 转换 成 相应 的 字符 串 ,然后 发 送 到 输 
出 流 输出 。 其 语法 格式 如 下 : 

« jsp:getProperty name= "Bean 的 名 字 " property- "属性 名 "/> 

(3) <jsp: useBean> jE. <jsp: useBean 二 动作 用 于 加 载 要 在 ISP 页 面 中 使 用 的 已 
经 定义 的 JavaBean, 使 用 该 动作 在 ISP 页 面 中 创建 该 Bean 的 实例 ,并 指定 它 的 名 字 以 及 作 
用 范围 。 其 语法 格式 如 下 : 

<jsp:useBean id- "name" scope- "page| request | session| application " class- "classname"/> 
或 


<jsp:useBean id- "name" scope- "page|request | session|application " 
class="classname" type- "typename"/» 


« jsp:useBean id- "name" scope- "page| request | session|application " 
w y E 


beanName- "beanName" type- "typename"/» 


«jsp:useBean id- "name" scope- "page | request | session|application" type- "typename"/» 


4. <jsp:forward> zjfE 

<jsp:forward> 2h fF HIT £f 1E 24 fiti 94 rig (0 38] ix ERE i fe I8] 53 — HTML 或 JSP 页 
面 文件 。 客 户 端 看 到 的 仍然 是 当前 页 面 的 地 址 ,但 显示 内 容 为 转向 的 新 页 面 。 

其 语法 格式 如 下 : 


« jsp: forward page= "目标 文件 URL"/> 


< jsp: forward page= "目标 文件 URL"> 
« jsp:param name= "参数 名 1" value- "参数 值 1"/> 
« jsp:param name- "参数 名 2" value- "参数 值 2"/> 


< /jsp:forward> 


5. <jsp:plugin 二 动作 
二 jsp:plugin 之 动作 用 于 在 客户 端 浏 览 器 插入 Applet 程序 或 JavaBean, 
其 语法 格式 如 下 : 


<jsp:plugin type- "bean | applet " 
code=" classFileName " 
codebase= "classFileDirectoryName " 
name- "instanceName " 
[archive- "URIToAchive,::*: "] 
[align- "bottom | top| middle| left| right "] 
[height- "displayPixels "] 
[width=" displayPixels "] 
[hspace- " leftrightPixels "] 
[vspace- " topbottomPixels "] 
[jreversion- " JREVersionNumber | 1.1"] 
[nspluginurl- " URLToPlugin "] 
[iepluginurl- " URLToPlugin "]> 
[<jsp:params> 
[<jsp:param name= "parameterName" 
value= "parameterValue| <% =expression$ > "/>] 
«/jsp:params > ] 
[<jsp:fallback> text message for user< /jsp:fallback> ] 
</jsp:plugin> 


8.1.5 JSP 脚本 元 素 


JSP 脚本 (Scriptlet) 是 编写 JSP 代码 时 使 用 很 频繁 的 元 素 , 它 通常 是 用 Java 编写 的 脚 
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本 代码 ,可 以 定义 变量 和 函数 ,也 可 以 进行 表达 式 求 值 .产生 输出 等 操作 。 
Scriptlet EA T * — 5" Rl" 2627" Z IR] ff] Java 代码 段 , 可 以 在 服务 器 端 被 编译 执行 , 执 
行 结果 会 蔡 入 页 面 文件 并 由 服务 器 发 回 给 客户 端 浏览 器 。 


8.2 实验 8.1 配置 JSP 运行 环境 


实验 目的 : 
(1) 熟悉 JSP 程序 运行 环境 的 配置 方法 。 
(2) 了 解 JSP 程序 的 运行 原理 。 
实验 内 容 : 
本 书 主要 以 JDK 6.0 十 Tomcat 6. 0 作为 运行 JSP 程序 的 实验 环境 ,因此 本 次 实验 要 求 
在 PC 上 安装 以 上 实验 环境 ,并 进行 测试 。 
实验 步骤 : 


1. 安装 JDK 6.0 

(1) 将 JDK 6.0 的 安装 程序 下 载 到 本 机 上 后 ,按照 安装 程序 的 安装 向 导 可 以 直接 进行 
安装 。 进 入 安装 向 导 界面 后 可 以 进行 IDK 的 路 径 设 置 ,如 图 8-1 所 示 。 如 果 使 用 默认 路 径 
则 直接 单 击 * 下 一 步 ? 按 钮 ,程序 会 自动 进行 安装 。 如 果 要 自 定义 安装 路 径 , 则 单 击 “ 更 改 " 按 
钮 ,选择 相应 路 径 后 再 单 击 “ 下 一 步 " 按 钮 进行 后 续 安 装 。 


自 定义 安装 
选择 要 安装 的 程序 功能 。 


请 从 下 面 的 列表 中 选择 要 安装 的 可 选 功 能 。 安 装 完成 后 ， 您 可 以 使 用 "控制 面板 "中 的 "添加 / 咕 除 程 
序 ' 实 用 程序 来 更 改 您 选择 的 功能 


BJ ARGUI S ooma REG 
-| 演示 Update 3， 包 括 专用 JRE 6 
ead Update 3. 32168885 300 MB 的 
名 -| 公共 JRE 硬盘 驱动 器 空间 . 
名 -| Java DB 
安装 到 : 


C:\Program Fies\Java\jdk1.6.0_03\ 


图 8-1 JDK 安装 程序 路 径 设置 界面 


(2) 安装 好 JDK 6.0 后 ,如 果 想 在 系统 的 任意 目录 下 编译 和 运行 编写 好 的 Java 程序 ， 
需要 先 设 置 环境 变量 。 本 实验 中 将 在 Windows 系统 下 环境 变量 中 设置 IDK 运行 路 径 。 
JDK 的 安装 路 径 均 使 用 安装 程序 的 默认 路 径 : C:\Program Files\Java\jdk1. 6.0_03。 

C 右 击 “我 的 电脑 ”, 在 弹出 的 快捷 菜单 中 选择 “属性 ”命令 ,在 弹出 对 话 框 中 单 击 “ 高 
级 ”选项 卡 的 “环境 变量 ”按钮 (如 图 8-2 所 示 )。 
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系统 尾 性 
要 进行 大 多 数 改 动 ， 您 必须 作为 管理 员 登 录 。 


-性 能 
视觉 效果 ， 处 理 器 计划 ， 内 存 使 用 ， 以 及 虚拟 内 存 


-用 户 配置 文件 
与 疙 登录 有 关 的 点 面 设置 


BAMBER — 
系统 自动 ， 系 统 失败 和 调试 信息 


b maro j| manso | 


图 8-2 Windows 系统 属性 界面 


O 在 “系统 变量 "列表 中 选择 Path 项 , 单 击 “ 编 辑 " 按 钮 (如 图 8-3 所 示 ) ,在 弹出 对 话 框 
中 的 “变量 值 ”文本 框 中 添加 “; C:\Program Files\Java\jdk1. 6. 0_03\bin”( 如 果 前 一 个 变量 
值 后 已 有 “;” 则 将 路 径 信 息 加 入 即 可 ) , 单 击 “ 确 定 ” 按 钮 ,如 图 8-4 所 示 。 


环境 变量 


Administrator 的 用 户 变量 QD 
变量 值 


TEMP C:\Documents and Settings\Admin. .. 
THP C:\Documents and Settings\Admin. .. 


Path 


KRAV: \Program Files\Java\jdkl.6.0_03\bin 


世相 WR j 


图 8-3 Windows 系统 环境 变量 操作 界面 图 8-4 ”编辑 系统 变量 Path 


O 在 “系统 变量 ” 栏 下 单 击 “ 新 建 ” 按 钮 (如 图 8-5 所 示 ) ,在 弹出 对 话 框 中 的 “变量 名 ” 输 
人 框 中 输入 “java_home”,“ 变 量 值 ”输入 框 中 输入 “C:\Program Files\Java\jdk1. 6.0. 03". 
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单 击 “ 确 定 ” 按 钮 ,如 图 8-6 所 示 。 

D 在 “系统 变量 ”" 栏 单 击 “新 建 ”" 按 钮 ,在 弹出 对 话 框 中 的 “变量 名 ”输入 框 中 输入 
”后 输入 “C:\Program Files\Java\jdk1l. 6. 0_03\lib\tools. jar; C:\ 
Program Files\Java\jdk1. 6. 0_03\jre\lib\rt. jar;. ;”, 单 击 “ 确 定 ” 按 钮 ,如 图 8-7 Bros. Æ 


“classpath”, 在 “变量 


此 环境 变量 设置 完毕 。 


Administrator 的 用 户 变 量 U 


环境 变量 


变量 值 
TEMP C:\Documents and Settings \Adn 
me C:\Documents and Settings\Adnin SAARE Ea 
Ex W java_home 
[ Faz an. ] í RED | | BRD | 变量 值 WD [C:\Program Files\Java\ jdkl.6.0_03 
FTO 
变量 值 E 6 à zc 
ConSpec C: WINDOWS systen32 Vend. exe (3 图 8-6 新 建 系统 变量 
FP ND MOST C... NO 
NUWBER OF PR... 2 
os Windows NT 
Path C: WWINDOWS\xysten32:C:\NINDORS:... |. 新 建 系统 变量 
Er EE classpath ] 
变量 值 四 Java\jdkl. 6.0_03\jre\lib\rt. jar; .:] 
(we J( mm 
图 8-5 选择 “新 建 系 统 变 量 图 8-7 新 建 系统 变量 classpath 
至 此 环境 变量 设置 完毕 。 可 以 通过 在 DOS 环境 下 直接 键入 javac 命令 按 回 车 键 来 检查 
环境 变量 是 否 设置 成 功 , 如 果 设 置 成 功 则 可 看 到 如 图 8-8 所 示 结 果 。 


国 命令 提示 符 


图 8-8 


2. 安装 Tomcat 6.0 


BSE! 


javac 命令 的 相关 使 用 语法 说 明 


将 Tomcat 6. 0 的 安装 程序 下 载 到 本 机 上 后 ,按照 安装 程序 的 安装 向 导 可 以 直接 进行 安 


装 。 具 体 步 又 如 下 。 


(1) 运行 安装 程序 ,进入 如 图 8-9 所 示 的 安装 向 导 界 面 


(2) 单 击 图 8-9 中 的 Next 按钮 ,进入 图 8-10 所 示 界 面 。 单 击 I Agree 按钮 ,进入 组 件 


* 121 * 


(lie mt] 


Welcome to the Apache Tomcat 
Setup Wizard 


This wizard will guide you through the installation of Apache 
Tomcat. 


Itis recommended that you dose all other applications 
before starting Setup. This will make it possible to update 
relevant system files without having to reboot your 
computer. 


/tomcat.apache.org 


lick Next to continue. 


ks] 
+ 
E 
o 
= 
o 
j= 
9 
$ 
[*] 
G 
a 
« 


http:/ 


图 8-9 Tomcat 6. 0 安装 向 导 界 面 (一 ) 
选择 界面 。 
因 Apade Tomcat Setup h 000 eiii 


License Agreement 
Please review the license terms before instaling Apache Tomcat. 


Press Page Down to see the rest of the agreement. 


Apache 
Version 2.0, January 2004 ea 
hi .org /lcenses, 


TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 
1. Definitions. 
“License” shall mean the terms and conditions for use, reproduction, 
and distribution as defined by Sections 1 through 9 of this document. 
站 You mustaccept the 
agreement to install Apache Tomcat 


Nullsoft Install System v2.22 — 


[<sedk |[ 1agee | (Coen 


图 8-10 Tomcat 6. 0 安装 向 导 界 面 (二 ) 


(3) 在 图 8-11 所 示 对 话 框 中 可 以 选择 你 所 需要 的 组 件 , 通 常 可 以 全 部 选 定 ,如 图 8-11 
所 示 , 单 击 Next 按钮 。 

(4) 选择 安装 路 径 。 可 以 使 用 默认 路 径 , 也 可 以 根据 自身 需要 自 定义 安装 路 径 。 设 置 
好 后 单 击 Next 按钮 ,如 图 8-12 所 示 。 

(5) WE Tomcat 基本 参数 。 可 以 在 此 设置 Tomcat 的 连接 端口 (默认 为 8080) ,管理 员 
登录 时 使 用 的 用 户 名 和 密码 。 如 果 设 置 了 用 户 名 和 密码 , 则 在 每 次 登录 Tomcat 环境 时 都 
需要 输入 设 定 的 用 户 名 和 密码 ,才能 够 进入 Tomcat 环境 。 设 置 完 成 后 单 击 Next 按钮 ,如 
图 8-13 所 示 。 

(6) 设置 Java 虚拟 机 的 路 径 。 在 安装 Tomcat 前 如 果 已 经 安装 好 JDK 环境 后 ,安装 向 
导 会 自动 查找 到 Java 虚拟 机 的 路 径 , 你 也 可 以 根据 需要 修改 成 其 他 已 经 安装 好 的 Java Hg 
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E Apache Te 


Choose Components 
Choose which features of Apache Tomcat you want to install. 


Check the components you want to install and uncheck the components you don't want to 
install. Click Next to continue. 


sectenooout T ~ 


Or, select the optional Dante 

components you wish to mE Tomat Position your mouse 

a IV] Start Menu Items over a component to 
[V] Documentation see its description, 
[V] Examples 


Space required: 10.0MB 


Nullsoft Install System v2.22 


(oem [oet] ( come] 
图 8-11 Tomcat 6. 0 安装 向 导 界 面 (三 ) 


Elavache Tomcat setup 0 (iei 


Choose Install Location 
Choose the folder in which to install Apache Tomcat. 


Setup will install Apache Tomcat in the following folder. To install in a different folder, dik 
Browse and select another folder. Click Next to continue. 


Space required: 10.0MB 
‘Space available: 3.2GB. 


Nullsoft Install System v2.22 


(de | ne> |] [cana] 


图 8-12 Tomcat 6. 0 安装 向 导 界 面 ( 四 ) 


Nullsoft Install System v2.22 


(em (ote ] 
图 8-13 Tomcat 6. 0 安装 向 导 界 面 (五 ) 
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拟 机 路 径 。 设 置 好 后 单 击 Install 按钮 ,安装 程序 将 按照 之 前 设置 的 所 有 参数 安装 Tomcat。 
安装 完成 将 看 到 如 图 8-14 的 界面 。 
[S] Apache Tomcat Setup [EX 


Completing the Apache Tomcat 
Setup Wizard 


Apache Tomcat has been installed on your computer. 
Click Finish to dose this wizard. 


tomcat.apache.org 


[Run Apache Tomcat 


Show Readme 


Apache Tomcat 6 
http: 


图 8-14 Tomcat 6. 0 安装 向 导 界 面 (六 ) 


(7) Wik Tomcat 环境 是 否 成 功 安 装 。 可 以 启动 Tomcat, 打 开 浏 览 器 ,在 地 址 栏 中 输入 
“http://localhost: 8080”. 当 浏 览 器 中 显示 如 图 8-15 的 页 面 时 ,说 明 Tomcat 已 经 安装 
成 功 。 


Æ apache Tomcat - Windows Internet Explorer _ 3 me 
ASS — P — - — 
GJA- | 了 mp/ocahost8080/ ea x = 
XAD WHE xe) BERA CAD WB 
we |Apache Tomcat n- GB Æ- Rm A 
Apache Tomcat 
Lad The Apache Software Foundz 
http://www.apache.or 
(Administration If you're seeing this page via a web browser, it means you've setup Torncat successful 
Congratulations! 


Status 
As you may have guessed by now, this is the defaut Tomcat home page. It can be found on the local 
filesystem at 


Documentation — S$CATALINA HOME/webapps/ROCT/index.html 


where "SCATALINA HOME" is the root of the Tomcat installation directory. If you're seeing this page, 
dont think you should be, then either you're either a user who has arrived at new installation of Tomca 
you're an administrator who hasn't got nisher setup quite right. Providingthe latter is the case, please 
the Tomcat Documentation for more detailed setup and administration information than is found in the 
INSTALL flle. 


NOTE: For security reasons, using the administration webapp is restricted to users with rok 
"admin". The manager webapp is restricted to users with role "manager". Users are defined | 
SCATALINA 3DIE/conf/toncat-users, x81 


Bug Database 
Open Bugs 


Included with this release are a host of sample Servets and JSPs (with associated source code), exte 
Users Malling List documentation, and an introductory guide to developing web applications. 
Developers Mailing List 

IRC 


Tomcat mailing ists are avaiable at the Tomcat project web site 


« users@tomcat.apache.org for general questions related to configuring and using Tomcat 
[Miscellaneous « dev@tomcatapache.org for developers working on Tomcat 


@ interet cy 


图 8-15 Tomcat 服务 器 环境 主页 面 
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8.3 实验 8.2 网 上 购物 订单 


实验 目的 : 


(1) 熟悉 JSP 程序 的 运行 。 
(2) 掌握 JSP 程序 基本 语法 。 


实验 内 容 : 


当 用 户 在 网 上 选 购 相应 货品 后 ,需要 填写 相应 订单 来 提供 收 货 人 信息 ,以 便于 厂商 邮寄 
货品 。 本 实验 要 求 编写 一 个 简单 的 JSP 程序 实现 该 购物 订单 的 基本 功能 : 将 客户 在 
Shopping. html 页 面 中 输入 的 联系 方式 和 邮寄 地 址 等 信息 内 容 读 取出 来 并 显示 在 另 一 页 面 
Shopping. jsp 中 。 


实验 步骤 : 


(1) 新 建 一 个 名 为 Shopping. html 的 HTML 页 面 ,在 其 中 输入 程序 清单 8-1 的 代码 ， 
其 页 面 内 容 如 图 8-16 所 示 。 当 用 户 在 其 中 输入 用 户 的 相关 信息 后 , 单 击 “ 确 定 ” 按 钮 , 则 跳 
转 至 Shopping. jsp 页 面 , 源 代码 见 程序 清单 8-2, 该 页 面 将 用 户 的 输入 信息 顺序 显示 ,如 
图 8-17 所 示 .请 按 实验 结果 将 程序 清单 8-1 和 8-2 的 空白 处 [起 码 1] ~ IB 9 |] TES 


为 保证 您 能 够 及 时 收 到 所 选择 的 货品 ， 请 如 实 填写 以 下 信息 。 
购买 人 姓名 , FEE | 
联系 电话 ，[13000000000 | 
所 在 城市 HR | 
详细 地 址 ， BORWXXEOOWHXXS| | 
HAAR: [ERE 


[xt ] xxm | 


图 8-16 实验 8.2 运行 结果 (一 ) 


客户 您 好 ， 以 下 是 您 提交 的 订货 单 信息 ， 谢 谢 您 。 


购买 人 姓名 ， 张 三 
联系 电话 ，13000000000 
北京 


京 
详细 地 址 ， 北 京 市 X x 区 X xix x 号 
付款 方式 ， 货 到 付款 


图 8-17 实验 8.2 运行 结果 (二 ) 
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程序 清单 8-1: 


<!--Shopping.html 源 代码 --> 
<html> 

<head> 

«script language- "javascript"> 
«pee 

function CheckSubmit () 

{ 


it ( (ARB ==") 
alert ("请 输入 购买 人 姓名 !"); 


document .orderform.name.focus (); 


return false; 
} 


it ( WE =="") í 
alert ("请 输入 联系 电话 !"); 


document .orderform.phonenumber . focus () ; 


return false; 


it ( (AMS 3]-- "")( 
alert ("请 输入 购买 人 所 在 城市 1"); 


document .orderform.city.focus(); 


return false; 


if (ARE 4|-- "t 
alert ("请 输入 详细 地 址 !"); 


document .orderform.address.focus (); 


return false; 


return true; 
} 
</script> 
</head> 


<body> 
<div align="center"> 
«table width= "750" border- "0" cellspacing- "1" cellpadding= "1"> 
SEES 
«td ><div align="center"> 
<table width= "80$ " border="0" cellpadding- "1" cellspacing- "1" class= "td"> 
< form name= "orderform" action- "Shopping.jsp" method= "post" 
<tr align="center"> 
<td colspan="2"> 
<font color="red"> 
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为 保证 您 能 够 及 时 收 到 所 选择 的 货品 ,请 如 实 填写 以 下 信息 。 
</font> 
</td> 
</tr> 
<tr> 
«td width- "30$ "align="right"> WE A lE : </td> 
<td align="left"> 
<input name="name" type="text" size="20"> 
</td> 
</tr> 
«tr» 
<td align= "right"> 联 系 电话 : </td> 
<td align="left"> 
<input name= "phonenumber" type="text" size="20"> 
« /td» 
</tr> 
Str 
«td align= "right"> 所 在 城市 : < /td> 
<td align="left"> 
«input name- "city" type="text" size="20"> 
</td> 
</tr> 
«rte 
«td align= "right"> 详 细 地 址 : </td> 
«td align= "left">< input name= "address" type="text" size="50">< /td» 
</tr> 
«tr» 
«td align= "right"> 付 款 方式 : </td> 
<td align="left"> 
<select name="paying"> 
<option value="1"> 邮 政 汇款 < /option> 
<option value- "2" selected- "selected"> 货 到 付款 < /option> 
</select> 
</td> 
«/tr» 
«tr» 
«td colspan- "2" align="center"> 
&nbsp; 
«/td» 
«/tr» 
«tr» 
«td align="right"> &nbsp;« /td» 
<td align="left"> 
«input name- "submit" type="submit" value=" 确定 " 
onClick- "return CheckSubmit () ; "> 
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«input name- "reset" type- "reset" value=" 重新 填写 "> 
«/td» 
«/tr» 
</form> 
</table> 
</div> 
</td> 
</tr> 
</table> 
</div> 
</body> 
</html> 


程序 清单 8-2 : 


«1- - Shopping. jsp 源 代 码 --> 
<% 6 page contentType- "text/html; charset- GB2312"$ > 
<% 
request.setCharacterEncoding ("gb2312") ; 
$> 
<html> 
<head> 
<script language- "JavaScript"» 


六 外 二 二 
function closer () { 
window.close () 7 
} 
= 
</script> 
</head> 
<body> 
<div align= "center"> 
<% 
String name = request .getParameter ("name") ; 
// 获 取 输 入 的 购买 人 姓名 信息 
String phonenumber = request .getParameter ("phonenumber") ; 
// 获 取 输 入 的 联系 电话 信息 
String city -request.getParameter ("city"); 
// 获 取 输 入 的 购买 人 所 在 城市 信息 
String address = request .getParameter ("address") ; 
// 获 取 输 入 的 购买 人 详细 地 址 信息 
String paying = request .getParameter ("paying"); 
// 获 取 输 入 的 支付 方式 信息 
S> 


«table width= "750" border= "0" cellspacing= "1" cellpadding- "1"> 
+ Bs 


Sex 


«td ><div align="center"> 
«table width="80% " border- "0" cellpadding="1" cellspacing="1" class="td"> 


«tr» 
«td colspan- "2" align="center"> 


<font color="red"> 客 户 您 好 ,以 下 是 您 提交 的 订货 单 信息 ,谢谢 您 。< /font> 


«/td» 
«/tr» 
«tr» 
«td colspan- "2" align="center"> 
&nbsp; 
</td> 
</tr> 
«tr» 


<td width- "40$ "align="right"> WRA E : 


«td align-"left"» 
代码 5 
</td> 
</tr> 
«tr» 
«td align- "right"> 联 系 电话 : < /td> 
«td align-"left"» 
代码 6 
</td> 
</tr> 
«tr» 
«td align- "right"> 所 在 城市 : </td> 
«td align-"left"» 
代码 7 
</td> 
</tr> 
<tr> 
<td align="right"> if 4H hi; </td> 
<td align="left"> 
代码 8 
</td> 
</tr> 
«ir 
<td align= "right"> 付 款 方式 : < /td> 
«td align="left"> 
代码 9 
</td> 
</tr> 


«tr» 


</td> 
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«td colspan- "2?" align="center"> 
&nbsp; 
«/td» 
«/tr» 
«tr» 
«td colspan- "2" align="center"> 
«input type=button value- "Close" onClick- "closer () "> 
</td> 
</tr> 
</table> 
</div> 
</td> 
</tr> 
</table> 
</div> 
</body> 
</html> 


(2) 在 Tomcat 安装 目录 下 的 webapps 目录 下 新 建 一 个 文件 夹 (名 称 可 设 定 为 myjsp)， 
将 编写 好 的 Shopping. html 文件 和 Shopping. jsp 文件 放置 到 该 文件 夹 中 。 在 本 实验 中 按 
照 所 设置 的 Tomcat 环境 ,将 这 两 个 文件 放 到 C:\Program Files\ Apache Software 
Foundation\Tomcat 6. 0\webapps\myjsp 目录 下 。 

(3) 启动 Tomcat. 打开 浏览 器 ,在 URL "P fij A “http://localhost: 8080/myjsp/ 
Shopping. html”, 观 察 是 否 显示 图 8-16 所 示 页 面 ,在 按 图 8-15 在 页 面 中 输入 相关 信息 后 
单 击 “ 确 定 ” 按 钮 ,观察 是 否 跳 转 至 图 8-17 所 示 页 面 。 

说 明 : 本 实验 中 在 Shopping. jsp 文件 中 使 用 了 JSP 的 内 置 对 象 request 的 
getParameter() 方 法 来 获取 从 前 一 页 面 (Shopping. html 文件 ) 中 传递 过 来 的 表单 内 数据 信 
息 。 该 方法 是 request 对 象 的 一 个 常用 方法 , 它 的 方法 原型 为 : String getParameter(String 
name) ;用 来 取得 从 客户 端 传递 给 服务 器 端的 参数 值 ,具体 参数 由 参数 name 确定 。 


8.4 实验 8.3 简单 购物 车 的 实现 


实验 目的 : 


(1) 进一步 掌握 JSP 基本 语法 。 
(2) 熟悉 JSP 相关 指令 元 素 和 动作 元 素 。 


实验 内 容 : 


编写 JSP 程序 实现 购物 车 的 基本 功能 , 即 向 购物 车 中 添加 或 删除 商品 ,并 给 出 购物 车 
中 的 商品 信息 和 总 金额 。 


实验 步骤 : 


新 建 一 个 名 为 Cart. html 的 HTML 文件 ,在 其 中 输入 程序 清单 8-3 所 示 的 源 代码 ,该 
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页 面 运 行 效果 如 图 8-18 所 示 。 在 该 页 面 中 选择 所 购 商 品 后 ,将 转 至 ShowCartInf. jsp 的 页 
面 ( 源 代码 见 程序 清单 8-4) ,用 来 显示 购物 车 中 所 有 的 商品 信息 、 每 件 商品 的 数量 以 及 总 价 
格 ,运行 效果 如 图 8-19 所 示 。 若 在 ShowCartInf. jsp 页 面 单 击 “继续 购物 ”按钮 则 回 到 Cart. 
html 页 面 继续 选择 所 需 商 品 , 如 图 8-20 所 示 ; 若 结束 购买 则 可 单 击 “ 完 成 ”按钮 。 如 果 要 删 
除 购物 车 中 的 某 种 商品 ,可 在 ShowCartInf. jsp 的 页 面 中 显示 的 相应 商品 右 部 单 击 “ 删 除 ” 
按钮 , 则 将 转 至 Delete. jsp 页 面 ( 源 代码 见 程序 清单 8-5) 删 除 该 商品 的 所 有 信息 ,然后 从 
Delete. jsp 页 面 自动 跳 转 回 到 ShowCartInf. jsp 页 面 重 新 显示 删除 所 选 商品 后 购物 车 的 信 
息 , 如 图 8-22 所 示 。 实 验 中 用 到 的 JavaBean 见 程序 清单 8-6 。 请 根据 所 给 程序 代码 及 实验 


结果 将 ShowCartInf. jsp 和 Delete. jsp 中 空白 部 分 | 伐 码 了 一 | 伐 码 介 补 充 完整 。 
a 


欢迎 光临 


请 选择 您 要 购买 的 书籍 ，“ [Book_1y] 
WERE. [p 


ts 


图 8-18 实验 8. 3 运行 结果 (一 ) 


您 所 选 购 的 书籍 有 ， 


书籍 名 称 。 数量 (本) 
Book 1. 2 EJ 


总 价格 ， 118.0 元 


ET 


图 8-19 实验 8.3 运行 结果 (二 ) 


欢迎 光临 

请 选择 您 要 购买 的 书籍 ，。 Es 
购买 数量 ， p c 
xe | 


图 8-20 ”实验 8. 3 运行 结果 (三 ) 
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您 所 选 购 的 书籍 有 : 


书籍 名 称 。 数量 (本) 
Book 2: 1 es | 
Book 1; 2 


总 价格 155.0 元 


seme | k] 


图 8-21 实验 8.3 运行 结果 (四 ) 


和 您 所 选 购 的 书籍 有 ， 


书籍 名 称 。 数量 (本 ) 
Book_2: 1 ns 


总 价格 : 37.0 元 


| ges] 


图 8-22 ”实验 8. 3 运行 结果 (五 ) 
程序 清单 8-3 : 


<!--Cart.html 源 代 码 --> 

«html» 

<head> 

<title> 购 物 车 < /title> 

< /head» 

<body> 

<div align="center"> 

< form name= "Nform" method= "post" action= "ShowCartInf.jsp" > 

<table width= "80$ " border- "0"> 

«tr» 

<td width- "50$ " height- "30" align="right"> 

请 选择 您 要 购买 的 书籍 : 

«/td» 

<td width= "50$ " align="left"> &nbsp; 

<select name= "BName"> 
<option value= "Book 1" selected> Book 1< /option> 
<option value= "Book 2"» Book 2< /option> 
<option value= "Book 3"> Book 3< /option> 
<option value= "Book 4"> Book 4< /option> 
<option value= "Book 5"> Book 5< /option> 
<option value= "Book 6"> Book 6< /option> 
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« /select»« /td» 
</tr> 


«tr» 
«td width= "50$ " height- "30" align="right"> 
购买 数量 : 
</td> 
<td width= "50$ " align="left"> &nbsp; 
<input type="text" name- "BNumber" value= "1" size="5">< /td> 
</tr> 
</table> 
<p> 
«input type="submit" name- "s" value= "提交 "> &nbsp; &nbsp; 
«input type- "reset" name- "r" value= "重新 挑选 "> 
</p> 
< /form 
</div> 
</body> 
« /html» 


程序 清单 8-4: 


<!-- ShowCartInf.jsp 源 代码 --> 
<%@ [ARE I| contentType- "text/html; charset=gb2312" language- "java"$ > 


<%@ [R13 2] import="java.util. * "$» 


<html> 
<head> 

<title> 购 物 车 < /title» 
</head> 


«jsp: fX 3] id="cart" scope- "session" class= "Cart.cart"/» 


<]jsp:| 伐 码 4] name- "Cart" property-" * "/> 


<$% 
String bookName- request .getParameter ("BName") ; 
// 获 取 书 名 
String bookNumber- request .getParameter ("BNumber") ; 
// 获 取 书 的 数量 
if (bookName!-null && bookName !="") 
t 
int nbookNumber- Integer.parseInt (bookNumber) ; 
Cart.add (bookName, nbookNumber) ; 
} 
Hashtable h=Cart.ShowCartInf (); 
Enumeration e-h.keys (); 


float sum=Cart.getSum() ; 
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S> 
<body> 
<div align="center"> 
<p> 您 所 选 购 的 书籍 有 : < /p> 
«table width- "80$ " border- "0"> 
SEX 
«td width= "50$ " height- "25" align="right"> 
书籍 名 称 &nbsp; &nbsp; 


</td> 
«td width- "50$" align="left" colspan="2"> 
&nbsp; 数 量 (本 ) 
</td> 
</tr> 
<% 
// 显 示 购 物 车 中 所 有 商品 信息 
while (e.hasMoreElements () ) 
if 
String name =e.nextElement () .toString(); 
int number = ((Integer)h.get (name) ) .intValue(); 
$> 
«tr» 
<td width- "50$ " height- "25" align="right"> 
<font color= "4 0000FF"» [Af 5|: </font> 
</td> 
<td width= "20%" align="left"> &nbsp;« font color- "4 FF0000"» | {R19 6| </font> < /td> 
«td width- "30$ " align="left"> &nbsp; 
«input type="button" name- "BName" value= "删除 " 
onClick= "javascript:window.location- 'Delete.jsp? BName=<%=name% > '"> 
</td> 
</tr> 
<% 
} 
$> 
«tr» 


«td width- "50$ " height- "25" align="right"> 
<font color- "4 0000FF" & fft fit. </font> 
</td> 
<td width= "50$ " height="25" align="left" colspan="2"> 


< font color- "4 0000FF"» &nbsp; | ffi 7| nbsp; 元 < /font> 


</td> 
</tr> 
«tr» 
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<td colspan= "3"> &nbsp;« /td» 
</tr> 
«tr» 
«td width- "50$ " height- "25" align="right"> 
« input type- "button" name- "continue" value- "继续 购物 " 
onClick= "javascript:window.location- 'Cart.html'"» 
«/td» 
<td width= "50$ " height- "25" align="left" colspan- "2"> 
&nbsp; &nbsp;« input type- "button" name- "finish" value- "完成 " 
onClick= "javascript :window.location= '4 '"» 
</td> 
</tr> 
</table> 
</div> 
< /body> 
« /html» 


程序 清单 8-5 : 


<!--Delete.jsp 源 代码 --> 
«$8 [代码 | contentType- "text/html; charset=gb2312" language- "java"$ > 


<html> 
<head> 

<title> 购 物 车 < /title» 
< /head> 


«jsp: R 3| id- "Cart" scope= "session" class="Cart.cart"/> 


«jsp: [fX 4] name- "Cart" property-" * "/> 


<body> 

<div align="center"> 

<% 

String bookName- request .getParameter ("BName") ; 
Cart .delete (bookName) ; 

response.sendRedirect ("ShowCartInf.jsp"); 

$> 

</div> 

< /body> 

</html> 


程序 清单 8-6: 


//cart.java 源 代码 
package Cart; 

import java.util. * ; 
import java.io.* ; 
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public class cart implements Serializable 

t 

float Sum- 0; 

Hashtable« String, Integer» Goods- new Hashtable« String, Integer» (); 


public void cart () 
{ 
} 


// 获 取 每 件 商品 的 价格 
public float getPrice (String goodsname) 
t 
if (goodsname .equals ("Book 1")) 
return new Float (59.0) ; 
else if (goodsname.equals ("Book 2")) 
return new Float (37.0); 
else if (goodsname.equals ("Book 3")) 
return new Float (49.0); 
else if (goodsname.equals ("Book 4")) 
return new Float (27.0); 
else if (goodsname.equals ("Book 5")) 
return new Float (32.0); 
else if (goodsname.equals ("Book 6")) 
return new Float (28.0); 
else 


return new Float (0); 


// 将 某 个 商品 信息 加 入 购物 车 
public void add (String GoodsName, int GoodsNumber) 
{ 
if (Goods .containsKey (GoodsName) ) 
{ 
int Nure ( (Integer) Goods. get (GoodsName) ) . intValue () ; 
Num- Num GoodsNumber; 
Goods .put (GoodsName, new Integer (Num) ) ; 
Sume Suw getPrice (GoodsName) * GoodsNumber; 


else 


Goods .put (GoodsName, new Integer (GoodsNumber) ) ; 
Sum= Sum+ getPrice (GoodsName) * GoodsNumber; 
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// 获 取 购物 车 中 所 有 商品 信息 
public Hashtable ShowCartInf () 
{ 

return Goods; 

$ 


// 从 购物 车 中 删除 一 件 商品 信息 

public void delete (String GoodsName) 

{ 
int GoodsNume ( (Integer) Goods .get (GoodsName) ) .intValue () 7 
Goods . remove (GoodsName) ; 
Sum- Sum- get Price (GoodsName) * GoodsNum; 


// 获 取 购物 车 内 商品 总 价格 
public float getSum() 
t 

return Sum; 
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第 9 章 


JSP 的 内 置 对 象 


JSP 的 内 置 对 象 是 不 需要 声明 就 可 以 直接 使 用 的 特殊 对 象 。 这 些 特殊 对 象 包含 了 特定 
的 信息 ,它们 的 存在 在 一 定 程度 上 简化 了 ISP 页 面 的 开发 ,也 提高 了 开发 的 便利 性 。 在 本 
章 将 对 常见 的 内 置 对 象 进行 介绍 ,并 通过 实验 来 具体 了 解 这 些 常见 内 置 对 象 的 应 用 和 作用 


范围 。 


9.1 


预备 知识 


JSP 的 内 置 对 象 有 9 种 : out 对 象 、request 对 象 、 response 对 象 、session 对 象 、 
application 对 象 exception 对 象 .config $F. page 对 象 和 pageContext 对 象 。 表 9-1 简单 
描述 了 这 9 种 内 置 对 象 的 基本 情况 ,对 于 这 9 种 内 置 对 象 的 详细 介绍 可 以 参看 (Web 开发 


技术 实用 教程 》。 
表 9-1 常见 的 内 置 对 象 
对 象 所 属 类 d R 作用 范围 

out javax. servlet. jsp. JspWriter 输出 流 对 象 page 
request javax. servlet. ServletRequest 的 子 类 触发 JSP 文件 的 请 求 对 象 request 
response javax. servlet, ServletResponse 的 子 类 | 返回 客户 的 响应 对 象 page 
session javax. servlet. http. HttpSession 用 户 的 会 话 对 象 session 
application | javax. servlet. ServletContext JSP 页 面 的 应 用 上 下 文 对 象 application 
pageContext | javax. servlet. jsp. PageContext JSP 页 面 的 上 下 文 对 象 page 
config javax. servlet. ServletConfig 初始 化 JSP Servlet 的 对 象 page 
page java. lang. Object JSP 页 面 servlet 的 当前 请 求 处 理 实例 | page 
exception Java. lang. Throwable 访问 错误 页 面 产生 的 异常 对 象 page 


1. 内 置 对 象 的 分 类 
对 于 表 9-1 列 出 的 9 种 内 置 对 象 从 应 用 角度 进行 分 类 ,可 以 分 成 4 类 : 
d) 5 10 有 关 的 内 置 对 象 为 out、request 和 response. 
(2) 与 JSP 执行 时 ,提供 有 关上 下 文 的 内 置 对 象 为 seesion application 和 pageContext。 
(3) 与 Servlet 有 关 的 内 置 对 象 为 page 和 config. 
(4) 与 Error 错误 有 关 的 内 置 对 象 为 exception. 
注意 : 在 这 9 种 内 置 对 象 中 ,pageContext、 request, response, session, application 和 
pageContext 必须 熟练 掌握 。 
2. 内 置 对 象 的 作用 域 
内 置 对 象 的 作用 域 表 示 内 置 对 象 的 作用 范围 。 内 置 对 象 有 4 种 作用 域 : page、request、 


session 和 application。 
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(1) page 作用 域 表示 具有 这 样 作 用 域 的 内 置 对 象 只 能 在 当前 的 JSP 页 面 中 有 效 。 

(2) request 作用 域 是 指 当前 请 求 中 有 效 , 当 服务 器 响应 了 这 次 客户 端的 请 求 , 再 次 请 
求 时 , 原 有 的 属性 将 会 失去 效用 。 

(3) session 作用 域 表 示 在 客户 端 和 服务 器 端的 会 话 过 程 中 有 效 , 除 非 会 话 关闭 或 者 会 
话 过 期 ;不 同 客户 对 应 不 同 的 session, 

(4) application 作用 域 表 示 在 整个 Web 服务 器 的 应 用 程序 中 发 生 作用 ,为 所 有 的 用 户 
服务 , 即 所 有 的 客户 共享 application 作用 域 的 web 应 用 。 


9.2 实验 9.1 out 对 象 的 输出 处 理 


实验 目的 : 


COD 了 解 内 置 对 象 的 基本 概念 。 
(2) 了 解 out 对 象 的 常见 方法 ,并 应 用 这 些 常见 方法 解决 实际 问题 。 
(3) 进一步 了 解 服务 器 端的 Web 应 用 。 


实验 内 容 : 


(1) 用 out 对 象 设 计 并 输出 一 个 HTML 二 维 表 。 该 二 维 表 输出 out 对 象 的 常见 方法 
和 方法 说 明 。 
(2) 用 out 对 象 设计 输出 一 个 XHTML 网 页 ,实现 菜单 功能 。 


实验 步骤 : 


练习 1: 输出 HTML 网 页 的 二 维 表 。 

本 次 练习 是 输出 一 个 关于 “out 对 象 的 常见 方法 "的 二 维 表 , 该 二 维 表 由 3 列 (方法 名 、 
方法 说 明 、 示 例 ) ,11 行 构成 。11 行 包 括 表 头 和 out 对 象 常 使 用 的 方法 clear()、clearBuffer()、 
close() flush C) , isAutoFlush C) , getBufferSize ( ) , gerRemaining ( ) , newLine ( )、print ( ) 及 
printlInO 。 注 意 比 较 方法 clearO .clearBuffer() .close() 和 flush() 的 不 同 之 处 。 要 求 仔细 阅 
读 下 列 程序 清单 9-1 中 列 出 的 outDemo. jsp, 找 出 并 修改 程序 中 存在 的 错误 ,使 得 运行 结 
类 似 图 9-1。 并 回答 下 列 问题 。 

程序 清单 9-1: 


«!--outDemo.jsp--» 
« $ 6 page contentType- "text/html; charset- gb2312" language- "java"$ > 
« ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.w3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"» 
«html xmins- "http://www.w3.0rg/1999/xhtml"» 
«head» 
«meta http- equiv- "Content- Type" content= "text/html; charset- gb2312"/» 
«title» out 对 象 常见 的 方法 < /title> 
<style type="text/css"> 
caption{ 
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XM) RED SEV KRW TAD HMW : 
O=- O- DEG ls ra oan 
Bt QD [d] ne tp: //Localhost :8080/chepter09/outDeno. jsp x ES | Ge 
fton S 欺诈 监控 已 打开 


out 对 象 的 常见 方法 

方法 说 明 示例 
clear O RBERSRERECES PE 
clearBuffer()  [BERZETRIXÉN SAAS 
close() 关闭 输出 流 
flush() 强制 输出 缓冲 区 的 数据 
isAutoFlush() “六 断 缓冲 区 是 否 具有 强制 输出 autoFlush 的 功能 [true 
getBufferSize() 版 回 组 神 区 的 的 大 小 [8192 
getRemaining() [ED ERPR RAS ANSI 7141 
newLine () Bia fr 
print () WERS Bc 
printlnO HBT tH fr e HRT ei HF 


图 9-1 out 对 象 常见 方法 的 输出 表 


color: # FF6600; 
) 

th{ 
background: # FFFF00; 
color: # 0000FF; 
} 

td{ 

color: # 000099; 

) 

</style> 

</head> 


<body> 
<table border="1"> 
<caption> out 对 象 的 常见 方法 < /caption» 
«tr» 
<th> 方 法 < /th> 
<th> 说 明 < /th> 
<th> 示 例 < /th> 
</tr> 
<% 
out.println("«tr»"); 
out.println("«td»clear()« /td» "); 
out.println("« td» ili Bf £X mh KAY 4E « /ta» ") ; 
out.println("« td» &nbsp;« /td» ") ; 
out.println("« /tr»"); 


out.println("«tr»"); 
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out.println("« td» clearBuffer () « /td» ") ; 

out .printIn ("<td> 清 除 缓冲 区 的 当前 内 容 </td>m) ; 
out.println("« td» &nbsp;") ; 

out.println("« /td»"); 

out.println("« /tr»"); 


out.println("«tr»"); 

out.println("« td» close ()« /td» ") ; 

out .printIn ("< td» X Hi] fij HH i< /td» ") ; 
out .println("«td» &nbsp;« /td» ") ; 
out.println("«/tr»"); 


out.println("«tr»"); 

out.println("«td» flush ()< /td» ") ; 
out.printin("<td> 强 制 输出 缓冲 区 的 数据 < /td>"); 
out.println("« td» &nbsp;« /td> ") ; 

out .println ("</tr>"); 


out .println ("<tr>"); 

out .print1n ("< td» isAutoFlush ()< /td>"); 

out.println("<td> 判 断 缓冲 区 是 否 具有 强制 输出 auto lush 的 功能 < /td> ") ; 
out.println("«td»"); 

out.isAutoFlush|() 

out.println("« /td»"); 

out.println("« /tr»"); 


out.println("«tr»"); 

out.println("« td» getBufferSize ()< /td» ") ; 
out.println("« td» i& [Al 82 np EX f X 7] /ta» ") ; 
out.println("«td»"); 

out.getBufferSize(); 

out.println("« /td»"); 


out .println ("</tr>"); 


out.printl1n ("<tr>"); 

out.println("«td»getRemaining ()« /td» ") ; 
out.println("<td> 返 回 缓冲 区 没有 占用 的 空间 < /ta» ") ; 
out.println("«td»"); 

out.getRemaining(); 

out.println("« /td»"); 

out.println("«/tr»"); 


out.println("«tr»"); 
out.println("« td» newLine () « /td» ") ; 
out.printin("<td> 输 出 一 新 行 < /td>"); 
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化 


Uu 


什么 


缓冲 区 大 小 为 1kb .2kb 和 5kb, 观 察 程 序 的 运行 结果 会 发 生 什 


out.println("«td»"); 
newLine () 7 

out .println ("</td>"); 
out .println ("</tr>"); 


out .println ("<tr>"); 

out .println ("<td> print () « /td>"); 
out .println ("< td> ii fii E « /td>"); 
out.println("<td> 输 出 文字 </td>m) ; 
out.println ("</tr>"); 


out.println("«tr»"); 
out.println("«td»println()«/td» "); 
out .println("« td» {íT fifi HH fri E « /td» ") ; 
out.println("« td» {íT ff Hi — f£1« /ta» ") ; 
out.println("« /tr»"); 

$> 

</table> 

< /body> 

</html> 


CD 如 果 在 clear() 方 法 一 行 中 ， clear() 方 法 的 示例 , 问 运行 结果 会 发 生 怎样 的 变 
为 什么 发 生 这 样 变 化 ,原因 是 什么 

(2) 如 果 为 clearBuffer() 一 行 中 ， ^ni clearBuffer() 方 法 的 示例 , 问 运行 结果 又 会 发 生 
变化 ,比较 clear() 方 法 和 clearBuffer() 方 法 的 异同 ? 

(3) 观察 out 对 象 的 print() 和 printlnO Jr i fE JSP 页 面 运行 结果 有 什么 不 同 ? 

(4) 如 果 通 过 page 指令 默认 JSP 页 面 的 缓冲 区 的 大 小 是 多 少 , 用 page 指令 分 别 设置 


* Openwave SDK 6.2.2 全] 器 | 区 


么 变化 ? File Edit View Tools Help 


态 生成 WML 菜单 页 面 , 该 菜单 页 面 中 的 菜单 项 有 ”新 闻 ”“ 财 


经 ” 


要 求 是 : 补充 menu. jsp 对 应 的 程序 清单 9-2. H] out 对 象 输出 
具有 链接 的 菜单 项 ,并 用 跑马 灯 的 形式 显示 访问 该 页 面 的 时 


间 。 


练习 2; 输出 XHTML MP 菜单 。 Go [http://localhost 8080/chapter03/menu jsp 图 
设计 一 个 服务 器 端的 JSP 文件 menu. jsp, 该 文件 可 以 动 


娱乐 "“ 游 戏 ”"“ 论 坛 " 以 及 动态 生成 当天 的 时 间 。 具 体 


运行 结果 如 图 9-2。 
序 清单 9-2: 


«!--menu.jsp--» 

<% 8 page contentType- "text/html; charset- gb2312" language- " 
java" import- "java.util.Date" $> 

< ! DOCTYPE html PUBLIC "- //WAPFORUM//DTD XHTML Mobile 1.0// 
EN" 

"http://www .wapforum.org/DTD/xhtml- mobi 1e10.dtd"» 


图 9-2 out 对 象 输出 菜单 
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«html xmlns= "http://www.w3.0rg/1999/xhtml"» 
<head> 
«meta http- equiv- "Content- Type" content= "text/html; charset=gb2312"/> 
«meta http- equiv- "refresh" content- "60"/» 
«title» WAP 网 页 菜单 < /title» 
<style type= "text/css"> 
pt display:- wap- marquee; 
- wap- marquee- 10o0p:10; 
- wap- marquee- style:slide; 
} 

</style> 
< /head» 


<body> 

<% 
out.println ("iW"); 
out.println ("WM Ze"); 
out.println ("RIR"); 
out .print Ln ("游戏 "); 
out.printin ("论坛 "); 

$> 

<% 
out.println ("<p>"); 
out .println(" 登 录 时 间 是 : "); 
out.println("< /p»"); 

$> 

< /body> 

</html> 


9.3 实验 9.2 内 置 对 象 的 4 种 作用 域 


实验 目的 : 


CD 了 解 内 置 对 象 的 4 种 作用 域 以 及 不 同 对 象 所 具有 的 作用 域 。 
(2) 比较 4 种 内 置 对 象 作用 域 的 不 同 之 处 。 

(3) 初步 了 解 9 种 内 置 对 象 的 具体 作用 和 常见 方法 。 

(4) 初步 运用 9 种 内 置 对 象 解决 实际 应 用 问题 。 


实验 内 容 : 


(1) 观察 不 同 内置 对 象 的 作用 域 下 实现 对 表格 背景 颜色 的 设置 。 
(2) 利用 session 实现 一 个 购物 车 程序 ,实现 将 虚拟 商店 的 数码 产品 放置 在 购物 车 内 。 
(3) 利用 application 对 象 制作 一 个 简易 留言 板 。 
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实验 步骤 : 


练习 1: 设置 表格 的 背景 。 

本 次 练习 是 初步 了 解 内 置 对 象 的 作用 域 , 比 较 4 种 作用 域 的 异同 。 并 对 常见 的 内 置 对 
象 的 常见 方法 具有 一 定 的 了 解 。 按 照 下 列 的 要 求 完 成 实验 任务 。 

CD 阅读 并 分 别 运行 下 列 程序 first. jsp 和 second. jsp, 代 码 见 程序 清单 9-3 和 程序 清 
单 9-4 记录 运行 结果 ,观察 并 记录 不 同 程序 下 输出 bgColor 属性 的 值 , 并 分 析 运 行 结 果 。 

程序 清单 3. 


<!--first.jsp--> 

<%@page contentType- "text/html; charset=gb2312" language- "java" %> 

< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.w3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"» 

«html xmins= "http: //www.w3.0rg/1999/xhtml"» 

<head> 

«meta http- equiv= "Content-Type" content= "text/html; charset=gb2312"/> 
<title> 设 置 的 背景 1< /title> 

</head> 


<body bgcolor= "# FFFFFE"> 
«t 
pageContext .setAttribute ("bgColor", "# FFFFFF") ; 
out.printin ("背景 颜色 : "); 
out.println (pageContext .getAttribute ("bgColor")); 
$> 
< /body> 
« /html» 


程序 清单 9-4: 


<!--second.jsp--> 

< $6 page contentType- "text/html; charset=gb2312" language- "java" %> 

< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.w3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"» 

«html xmlns= "http: //www.w3.0rg/1999/xhtml"» 

<head> 

«meta http- equiv- "Content- Type" content= "text/html; charset=gb2312"/> 
<title> 设 置 背景 < /title> 

</head> 


<body bgcolor= "# FFFEFE"> 
«t 
out.println (" 背 景 颜色 : "); 
out .print1n (pageContext .getAttribute ("bgColor")); 


S> 
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< /body» 
</html> 


(2) 阅读 并 分 别 运行 下 列 程序 third. jsp 和 forth. jsp, 代 码 见 程序 清单 9-5 和 程序 清 


Tf. 9-6, 记 录 运 行 结 果 ,观察 并 记录 不 同 程序 下 输出 bgColor 属性 的 值 ? 然后 在 程序 清单 9-5 
的 | 器 处 去 掉 注释 ,并 添加 代码 “一 jsp:forward page=" forth. jsp"/ 盖 ”, 分 析 运 行 结果 ,比较 
添加 代码 前 后 的 异同 。 

程序 清单 9-5: 


<!--third.jsp--> 

<% @ page contentType- "text/html; charset=gb2312" language= "java" %> 

< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.w3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"> 

«html xmins= "http: //www.w3.0rg/1999/xhtml"» 

<head> 

<meta http- equiv- "Content- Type" content= "text/html; charset=gb2312"/> 
<title> 设 置 表格 背景 3< /title» 

< /head> 


<body> 

<% 
request.setAttribute ("bgColor", "# FF0000") ; 
String color- ""+ request .getAttribute ("bgColor"); 
out.println(" 背 景 颜色 1. "); 
out.println("« table border= '1'>"); 
out.println("«tr»«td» Bil f4< /td» « ta» [li « /td></tr>"); 
out.println("« tr» «td» "+ color+ "« /td» "); 
out.println("« td bgcolor= '"+ color+ "'> &nbsp;« /td» ") ; 
out.println("« /table>") ; 


$> 
<!--[@--> 
< /body> 
</html> 
程序 清单 9-6: 


<!--forth.jsp--> 

<%@page contentType- "text/html; charset=gb2312" language- "java" %> 

< ! DOCTYPE html PUBLIC "~ //W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.wW3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"» 

«html xmins- "http://www.w3.0rg/1999/xhtml"» 

<head> 

«meta http- equiv= "Content- Type" content= "text/html; charset=gb2312"/> 
<title> 设 置 表格 背景 < /title> 

< /head» 
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<body> 
<% 
String color= "4 request .getAttribute ("bgColor") ; 
if(color--null) 
color- "# FEFFFE"; 
out.println (" 背 景 颜 色 2: ") 
out .println("<table bgcolor- "+ color+ "»"); 
out .print1n ("< tr» « td» Bi (& « /ta» ") ; 
out.println("«tr»«td» "+ color "< /td» "); 
out.println("« /table»"); 
$> 
< /body> 
</html> 
(3) 将 程序 清单 9-5 和 程序 清单 9-6 代码 中 的 request 对 象 用 session IRRA , Wa 
同一 浏览 器 窗口 中 分 别 运行 程序 清单 9-5 和 程序 清单 9-6 的 代码 ,观察 运行 结果 。 ei 
览 器 窗口 后 再 打开 ,再 次 重新 运行 修改 后 的 程序 清单 9-6. ERS ni Uis f] AR AY AR Fe). dH 
有 不 同 , 写 出 原因 。 
(4) 将 程序 清单 9-5 和 程序 清单 9-6 代码 中 的 request 对 象 用 application 对 象 替代 , 然 
后 在 同一 浏览 器 窗口 中 分 别 运行 程序 清单 9-5 和 程序 清单 9-6 的 代码 ,观察 运行 结果 。 关 
闭 浏览 器 窗口 后 再 打开 ,再 次 重新 运行 修改 后 的 程序 清单 9-6。 比 较 用 application 和 
session 对 象 替 换 的 运行 结果 的 不 同 之 处 , 写 出 原因 。 
(5) 定义 一 个 web. xml, 代码 如 程序 清单 9-7 所 示 。 将 程序 清单 9-8 的 fifth. jsp 的 


代码 了 一 | 代码 3| 处 补充 完整 ,实现 用 config 对 象 来 获取 并 设置 表格 的 前 景 颜 色 和 背景 颜 
色 ,运行 结果 见 图 9-3。 修 改 web. xml 的 bgcolor 参数 的 值 ,重新 启动 Tomcat, 观 察 分 别 用 
ifth. jsp 和 tablecolors 名 的 运行 结果 。 比 较 二 者 的 不 同 之 处 。 


卫 设置 表格 闫 色 
LFO MEO FEV KRA IAD R00 


Qa- O- HAG Axe ves 6 S m-Q 


i QD |) nt tp: //Localhost :8080/chapter09/tablecolor M| [EY 


图 9-3 设置 表格 颜色 


序 清 单 9-7: 


<?xml version- "1.0" encoding- "ISO- 8859- 1"?» 
«1--web.xml-- 


« web- app xmlns= "http://java.sun.com/xml /ns/javaee" 
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xmlins:xsi-"http://www.w3.0org/2001/XMLSchema- instance" 
xsi:schemalocation- "http: //java.sun.com/xml/ns/javaee 
http://java.sun.com/zml/ns/javaee/web- app 2 5.xsd" 


version-"2.5"» 


<display- name» An application of setting colors for a table« /display- name» 
«description» 

An Web application for setting colors for a table. 

« /description» 


«servlet» 
< servlet- name» TableColors« /servlet- name> 
« jsp- file» /fifth.jsp< /jsp- file> 
«init- param» 
< param- name» color« /param- name> 
<param- value» # FFFFFF< /param- value» 
< /init- param» 
«init- param» 
< param- name» bgcolor« /param- name> 
<param- value» # 0000FF« /param- value» 
< /init- param» 
< /servlet» 


<!-- X Servlet 的 映射 --> 
< servlet- mapping» 
< servlet- name> TableColors< /servlet- name> 
«url- pattern» /tablecolors< /url- pattern» 
< /servlet-mapping» 
< /web- app» 


程序 清单 9-8: 


«1--fifth.jsp --> 

< % @ page contentType- "text/html; charset- gb2312" language- "java" %> 

< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.w3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"» 

«html xmlns= "http: //www.w3.org/1999/xhtmL"> 

<head> 

«meta http- equiv- "Content- Type" content= "text/html; charset- gb2312"/» 
<title> 设 置 表格 颜色 < /title> 

</head> 


<body> 
<% 


String color=- [A 1| ; 
// 获 取 前 景色 
String bgcolor=| {tf 2 
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// 获 取 背 景色 
out.println( 4G 3|); 

// 设 置 表格 的 前 景色 和 背景 色 
out.println("«tr»"); 
out.printin("<th> 前 景色 < /th» ") ; 
out.println("«th» 1$ 3& (& « /th» ") ; 
out.println("« /tr»"); 


out.println("«tr»"); 


out .print1n ("< td> "+ color "< /td» "); // 输 出 前 景色 的 值 
out.println("«td» "+bgcolor+ "< /td> "); // 输 出 背景 色 的 值 


out.println("«/tr»"); 
out.println("« /table» "); 

$> 

< /body> 

</html> 

练习 2: 用 session 对 象 实现 购物 车 。 

本 次 练习 主要 是 深入 了 解 会 话 管理 以 及 session 对 象 的 具体 应 用 。 具 体内 容 是 将 虚拟 
商店 的 数码 产品 放置 在 购物 车 内 。 产 品 的 类 别 有 闪 存盘 、 移 动 硬 盘 \、 摄 像 头 、 数 码 相 机 和 
MP3/MP4。 每 个 类 别 有 具 体 品牌 的 产品 。 要 求 ,设计 一 个 购物 车 ,客户 可 以 选择 产品 放置 
在 购物 车 中 ,并 可 以 浏览 购物 车 内 的 产品 。 注 意 ,客户 购物 车 的 产品 可 用 session 对 象 保存 。 
运行 结果 类 似 图 9-4 至 图 9-7。 

tht W AE] http://jspeourse. edu. en:8080/digital/index. jsp. wE ss 


选择 数码 产品 类 别 : 
1 区 


JCCOOOOC 网 络 公司 ， 版 权 所 有 。2007-05-28 
图 9-4 产品 类 别 运行 结果 


AE] http://jspeourse edu. cn:8080/di gi tal/product. jsp?id-2 


顾客 选择 的 产品 : 


移动 硬盘 
联想 稳定 型 I 代 (40G) 
单价 :899 元 
购买 数量 :全 
联想 稳定 型 I 代 (60G) 
单价 :119 元 


购买 数量 ; 
联想 稳定 型 I 代 (80G) 
单价 :1499 元 

购买 数量 :| 


图 9-5 某 类 别 的 产品 运行 结果 
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AED [Æ] netp://jspcourse. edu. cn:8080/4i gi tal /purchase. jsp. 


您 选择 的 产品 有 : 
联想 稳定 型 I 代 (40G) 2 件 
总 价 :1798 元 


XXXXXXXX 网 络 公司 


， 版 权 所 有 。2007-05-28 
图 9-6 购物 车 产品 的 浏览 


地 址 人 0) |Æ] http: // jspcourse. edu. cn:8080/di gi tal/purchase. jsp mi 


您 选择 的 产品 有 : 
联想 稳定 型 fR(40G) 2 件 
索尼 NT3439 2 件 
总 价 :4374 元 


XXXXXXXX 网 络 公司 ， 版 权 所 有 。2007-05-28 
图 9-7 继续 购物 后 购物 车 产品 浏览 
5&2] 3. 用 application 对 象 实现 一 个 简易 的 留言 板 。 
设计 一 个 简单 的 留言 板 。 留 言 板 提 供 姓名 、 标 题 和 留言 3 个 信息 的 输入 。 用 户 可 以 提 
交 留 言 .浏览 留言 板 的 历史 记录 以 及 重 置 留言 信息 。 确 认 留 言 后 ,发 送 的 所 有 信息 以 表格 形 
式 在 同一 页 显示 出 来 ,运行 结果 如 图 9-8 所 示 。 要 求 用 JSP 内置 对 象 application 来 保存 留 
言 信息 ,不 需要 应 用 数据 库 。 


地址 QD | 入 http://jspeourse. adu. cn:8060/chapter_10/JSP10_15. jsp 


est — E AE: 
各 (位 姓名 :pipi ERENER 欧 迎 来 到 美丽 的 世界 ! 
Boh 姓名 :chenchen 标题: 火车 村 OE ae 


第 3 位 姓名 :jiane aeae BE: oag 


图 9-8 留言 板 的 运行 结果 
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(1) 比较 page. request, session 和 application 作用 范围 的 不 同 之 处 。 
(2) 要 在 不 同 页 面 之 间 共 享 数 据 , 可 以 使 用 什么 方法 ? 要 在 不 同 用 户 之 间 共 享 数据 ,可 
以 使 用 什么 方法 ? 


9.4 实验 9.3 创建 错误 处 理 页 面 


实验 目的 : 


(1) 了 解 exception 对 象 的 常见 方法 以 及 用 exception 对 象 解决 实际 问题 。 
(2) 初步 了 解 JSP 错误 处 理 的 实现 过 程 。 
(3) 进一步 体会 内 置 对 象 的 作用 域 的 概念 。 


实验 内 容 : 
设计 并 实现 网 站 的 用 户 登 录 , 如 果 用 户 的 输入 的 关键 信息 如 (用 户 名 或 密码 为 空 ) ,要 求 


给 出 具体 错误 提示 信息 ;如 果 用 户 输入 的 信息 3 次 错误 , 则 要 求 退出 用 户 登 录 界 面 , 并 给 出 
相应 的 错误 原因 。 


实验 步骤 : 


本 次 实验 是 了 解 当 错误 发 生 时 ,该 如 何 处 理 错 误 。 程 序 清单 9-9— 9-11 分 别 是 程序 
log. jsp、validate. jsp 和 error. jsp 的 部 分 代码 。 要 求 如 下 : 

(1) 修改 log. jsp 实现 登录 界面 ,使 登录 失败 的 相关 信息 可 以 显示 。 

(2) 修改 validate. jsp 实现 登录 信息 的 验证 。 验 证 用 户 是 否 输入 密码 .是 否 输入 用 
户 名 .是 否 输入 的 信息 正确 。 如 果 用 户 输入 的 信息 的 次 数 超过 三 次 ,要 求 退 出 登录 , 返 
回 主页 面 ; 如 果 用 户 输入 的 用 户 名 为 “chenyi" 及 密码 为 “123456”, 则 输出 登录 成 功 的 
信息 。 

(3) 将 error. jsp 的 | 代码 段 | 补充 完整 ,实现 对 错误 的 处 理 。 运 行 结果 如 图 9-9 至 
图 9-15 所 示 。 


Microsoft Internet Explorer 
文件 @) 80) FEV WO) IAD HW 


O=- O- AAG Pss yc 6 32 m- Q 
CIS calhost:8080/chapter09/1og. jsp M| EJ HH Google|G~ Yo Qum 
GE 


TH te BATE D osx 


图 9-9 输入 信息 为 空 
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J SH - Microsoft Internet Explorer 


Xi) MQ FEV KEW TAD Wb 
Q»-O HAG s wa oSm- Q 


@ hts: //ocathost :8080/chapter03/validate. E| E] HS Google|G- — we» 
o TAEAKE 


图 9-10 提示 输入 信息 为 空 的 错误 信息 


J XH; - Nicrosoft Internet Explorer 


XED REO SEV KEW IAD MW 
Ox- O HAG Ps Yum 6 2 9 0 


地 址 四 ) [iB] http: //1ocalhost:8080/chapter09/vali date M| [E] RSI Google|G- — wj? 
prt J BAR AAT 


用 户 名 和 密码 不 正确 
RP. [iata 


图 9-11 输入 信息 错误 


文件 FE) REO BFW KR IAW Wb 
On- O- RAG Px k @ Lz 


地 直 四 ) [i] http: //1ocalhost:8080/chapter09/vali date M| EJH Google|G- — wi? 
vorto Kr 


用 户 名 和 密码 不 正确 
用 户 名 ， ] 


图 9-12 提示 输入 信息 错误 


Microsoft Internet Explorer 


文件 四 RED BHO KRY TAG Wb 
O=- O- HAG Ax y emo 


地 址 四 ) (iB) netp://ocathost:8000/chapter09/loe. jz (| EJHA Google |G G b> Qik 
orto BABAR D 2- 


HPZ: [heyi 
= 码 ， 


Bg) (££) 


图 9-13 输入 密码 为 空 


soft Internet Explorer 


xo #80 BP vew rao €bo 


Oa- O- HAG s rma 6 2m 


地 址 四) dE] http: //Localhost:8080/chapter09/validate. M 


图 9-14 显示 输入 密码 为 空 的 提示 信息 


当主 页 - Hicrosoft Internet Explorer 
文件 于) SED SEW KRW IAD R00 


Q»-O HAG Ds" e6o2m 9G 


HBE D [图 heey: //Locadhoxt :6080/chapterO9/nainF age.) EJ HS | Googe|G- h> @es- 
orto ele Kira Re nt 选项 - 


内 置 对 象 的 测试 主页 


图 9-15 输入 三 次 登录 信息 错误 后 转向 主页 
程序 清单 9-9. 


<!--1og.jsp--> 

«$ 6 page contentType- "text/html; charset=gb2312" language- "java"$ > 

< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"» 

«html xmins- "http: //www.w3.org/1999/xhtm1"> 

<head> 

«meta http- equiv= "Content-Type" content= "text/html; charset=gb2312"/> 
<title> 登 录 < /title» 

< /head> 


<body> 
< form method= "get" action= "validate.jsp"» 

用 户 名 : 
«input type="text" name- "username" width="10"/> 
<br/> 

密 &nbsp; &nbsp;li ; 
«input type="password" name= "password" width= "10"/» 
<br/> 

«input type="submit" value= "确认 "/> 

«input type- "reset" value=" 重 置 "/> 
</form> 
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< /body» 
</html> 


程序 清单 9-10: 


«!--validate.jsp--» 

<% @ page contentType- "text/html; charset- gb2312" language- "java"  errorPage- "error.jsp" 
$> 

< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.w3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"> 

«html xmins- "http: //www.w3.0rg/1999/xhtml"» 

«head» 

«meta http- equiv- "Content- Type" content- "text/html; charset- gb2312"/» 

<title> 验 证 < /title» 

< /head» 


<body> 

<% 
String userStr= request .getParameter ("username") ; 
String passStr= request .getParameter ("password") ; 


if (userStr.equals ("chenyi") &&passStr.equals ("123456") ) 
out.println(" 登 录 成 功 ! "+ times) ; 
$> 
< /body> 
</html> 


程序 清单 9-11: 


<!--error.jsp--> 

<% @ page content Type= "text/html ; charset= gb2312"anguage= "java"isErrorPage= "true"$ > 
< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.wW3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"» 

«html xmlns= "http: //www.w3.0rg/1999/xhtml"» 

<head> 

«meta http- equiv= "Content- Type" content= "text/html; charset=gb2312"/> 
«title» Yr ! </title> 

< /head» 


<body> 
<% 


代码 段 


// 补 充 关 于 错误 的 处 理 ; 
$» 


« jsp: forward page- "log.jsp"/» 
< /body» 
</html> 
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9810 € JSP 的 文件 操作 


文件 操作 在 JSP 中 也 占据 着 非常 重要 的 地 位 。 开 发 人 员 经 常会 涉及 对 文件 .文件 目录 
的 读 写 ,由 于 JSP 是 基于 网 络 的 开发 ,很 多 程序 都 涉及 到 文件 的 上 传 和 下 载 ,这 也 是 属于 
JSP 对 文件 的 操作 ,这 些 对 文件 的 操作 都 是 使 用 了 ISP 的 输入 和 输出 流 来 完成 的 。 本 章 将 
介绍 ISP 文件 操作 的 实验 ,帮助 读者 掌握 ISP 的 文件 操作 。 


10.1 预备 知识 


在 Java 语言 的 程序 设计 中 ,1/O 操作 ,特别 是 文件 操作 是 非常 重要 的 一 部 分 ,同样 , 文 
件 操 作 在 JSP 中 也 占据 着 非常 重要 的 地 位 。 由 于 JSP 能 使 用 Java 的 1/0 系统 ,所 以 在 JSP 
中 对 文件 的 操作 和 一 般 Java 程序 没有 太 大 的 区 别 。 本 章 本 着 从 浅 及 深 的 角度 ,首先 介绍 
java. io. File 类 ,然后 介绍 JSP 中 常用 的 输入 输出 流 , 最 后 对 一 个 常用 于 文件 上 传 处 理 的 
jspSmartUpload 组 件 展开 介绍 。 


10.1.1 File 类 


java. io. File 类 专门 提供 一 种 抽象 ,用 于 以 平台 独立 的 方式 处 理 大 多 数 平台 依赖 的 、 复 
杂 的 文件 和 路 径 名 问题 。File 类 包含 许多 获取 文件 属性 的 方法 以 及 创建 ,删除 和 重 命名 文 
件 和 文件 目录 的 方法 。 

1. File 的 创建 

File 的 主要 构造 方法 如 下 : 

(D FileCString pathname) ; 

(2) File(String parent, String child); 

(3) File(File parent, String child). 

2. File 的 主要 方法 

File 的 主要 方法 见 表 10-1, 

表 10-1 File 的 主要 方法 


方 法 功 能 
boolean canRead() 测试 应 用 程序 是 否 能 从 指定 的 文件 中 进行 读 取 
boolean canWrite() 测试 应 用 程序 是 否 能 写 当 前 文件 
boolean delete() 删除 当前 对 象 指定 的 文件 
boolean exists() 测试 当前 File 是 否 存在 


String getAbsolutePathO 返回 由 该 对 象 表示 的 文件 的 绝对 路 径 名 
String getCanonicalPath() 返回 当前 File 对 象 的 路 径 名 的 规范 格式 


String getName() 返回 表示 当前 对 象 的 文件 名 
String getParent() 返回 当前 File 对 象 路 径 名 的 父 路 径 名 ,如 果 此 名 没有 父 路 径 则 为 null 
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续 表 


方 法 功 能 
String getPath() 返回 表示 当前 对 象 的 路 径 名 
boolean isAbsolute() 测试 当前 File 对 象 表示 的 文件 是 否 是 一 个 绝对 路 径 名 
boolean isDirectory() 测试 当前 File 对 象 表示 的 文件 是 否 是 一 个 路 径 
boolean isFile() 测试 当前 File 对 象 表 示 的 文件 是 否 是 一 个 普通 文件 
long lastModified() 返回 当前 File 对 象 表示 的 文件 最 后 修改 的 时 间 
long length() 返回 当前 File 对 象 表示 的 文件 长 度 
String[ ]listO 返回 当前 File 对 象 指定 的 路 径 文件 列表 
File] listFiles() 返回 一 个 抽象 路 径 名 数组 ,这 些 路 径 名 表示 此 抽象 路 径 名 所 表示 目录 中 
的 文件 
boolean mkdir() 创建 一 个 目录 , 它 的 路 径 名 由 当前 File 对 象 指定 
boolean renameTo( File) 将 当前 File 对 象 指定 的 文件 更 名 为 给 定 参数 File 指定 的 路 径 名 
String toString() 返回 当前 对 象 的 字符 串 表 示 


10.1.2 JSP 的 输入 流 和 输出 流 


1. JSP 的 输入 和 输出 流 

File 对 象 封装 了 文件 或 路 径 属 性 ,但 是 不 包含 从 文件 中 读 写 数据 的 方法 。 为 了 进行 文 
件 读 写 操作 ,需要 用 适当 的 Java L/O 类 创建 对 象 ,这 些 对 象 包含 从 文件 中 读 写 数据 的 方法 。 
Java 有 许多 用 于 各 种 目的 的 1O 类 ,可 以 把 它们 分 为 输入 类 和 输出 类 。 输 入 类 包含 读数 据 
的 方法 ,输出 类 包含 写 数据 的 方法 。 在 Java 中 是 使 用 建立 1/O 对 象 的 方式 进行 输入 和 输 
出 ,输入 的 对 象 被 称 为 输入 流 , 输 出 的 对 象 被 称 为 输出 流 。 

流 是 一 个 很 形象 的 概念 , 当 程 序 需要 读 取 数 据 时 ,就 会 开启 一 个 通 向 数据 源 的 流 , 这 个 
数据 源 可 以 是 文件 .内 存 或 网 络 连 接 , 则 这 就 是 “输入 流 ”, 如 图 10-1 所 示 。 类 似 的 , 当 程 序 
需要 写 人 数据 的 时 候 ,就 会 开启 一 个 通 向 目的 地 的 流 , 这 就 是 “输出 流 ”, 如 图 10-2 所 示 , 这 
时 你 就 可 以 想像 数据 好 像 在 这 其 中 “ 流 ” 动 一 样 。 


stream 
/ 


Source 4 
reads 
Program 


图 10-1 输入 流 示意 图 


stream 


Program | writes | Pd 
Dest 


图 10-2 输出 流 示意 图 


Java 1/O 中 的 流 分 为 两 种 ,一 种 是 字 节 流 , 另 一 种 是 字符 流 , 分 别 由 4 个 抽象 类 来 表示 : 
InputStream, OutputStream, Reader 和 Writer, Java 中 其 他 多 种 多 样 变化 的 流 均 是 由 它们 
继承 出 来 的 。 
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2. 字 节 流 
以 字 节 为 单位 进行 读 写 直 


的 称 为 字 节 流 , 在 Java 中 , 字 节 流 分 为 输入 流 和 输出 流 , 分 别 是 


InputStream 和 OutputStream 及 其 子 类 。 字 节 流 结构 如 图 10-3 和 图 10-4 所 示 。 


LineNumberInputStream 


DataInputStream 


BufferedInputStream 


PushbackInputStream 


图 10-3 


InputStream 类 结构 图 


DataOutputStream 


BufferedOutputStream 


( ) 


ByteArrayOutputSteam D PrintStream 


ObjectOutputStream 
图 10-4 OutputStream 类 结构 图 
R 10-2 是 字 节 流 的 几 个 常用 子 类 及 功能 。 
表 10-2 字 节 流 常用 子 类 及 功能 
字 节 流 类 功能 简单 介绍 
DatalInputStream 包含 了 读 取 Java 标准 数据 类 型 的 输入 流 
DataOutputStream 包含 了 写 Java 标准 数据 类 型 的 输出 流 


ByteArrayInputStream 
ByteArrayOutputStream 
FileInputStream 
FileOutputStream 
PrintStream 
PushbackInputStream 
PipedInputStream 
PipedOutputStream 
SequenceInputStream 
BufferedInputStream 
BufferedOutputStream 
FilterInputStream 


FilterOutputStream 


字 节 流 抽象 类 InputStre 
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从 字 节 数组 读 取 的 输入 流 

写 入 字 节 数组 的 输出 流 

从 文件 读 入 的 输入 流 

写 入 文件 的 输出 流 

包含 最 常见 的 print() 和 println() 方 法 实现 输出 流 
返回 一 个 字 节 到 输入 流 .主要 用 于 编译 器 的 实现 
输入 管道 

输出 管道 

将 个 输入 流 联合 起 来 ,一 个 接 一 个 按 一 定 顺 序 读 取 
EIL ES 

缓冲 输出 流 

实现 了 InputStream 接口 的 过 滤器 输入 流 

实现 了 OutputStream 接口 的 过 滤器 输出 流 


am 和 OutputStream 的 常用 方法 如 表 10-3 所 示 。 


3X 10-3 InputStream 和 OutputStream 的 常用 方法 


Ho dk E 能 
int read() 读 取 一 个 字 节 的 数据 ,并 返回 读 到 的 字 节 
int read(byte[L Jb) 将 数据 读 入 一 个 字 节 数组 ,同时 返回 读 回 的 字 节 数 


int read(byte[ ] b.int off,int len) 将 数据 读 入 一 个 字 节 数组 。 返 回 读 回 的 实际 字 节 数 。 其 中 ,b: 
指定 要 把 字 节 读 入 哪个 数组 ;off: 指定 数组 的 偏 移 位 置 ,第 一 个 
字 节 应 放 在 哪个 位 置 ;len: 读 回 的 最 大 字 节 数 


long skip(long n) T 5i A Tie PRL n AFT ER Il A Sc Pk BE AY 55735 XC 

int available) 返回 在 不 加 阻止 的 情况 下 ,可 用 的 字 节 数 

void mark(int readlimit) 在 此 输入 流 中 标记 当前 的 位 置 

void reset() 将 此 流 重新 定位 到 对 此 输入 流 最 后 调用 mark 方法 时 的 位 置 
long skip(long n) 跳 过 和 放弃 此 输入 流 中 的 个 数据 字 节 

void writeCint b) 写 人 一 个 字 节 的 数据 

void writeCbyte[ ] b) BARA b 内 的 所 有 字 节 


void writeCbyte[ | b.int off,int len) BARA b 内 的 所 有 字 节 ,其 中 ,b: 指定 要 从 哪个 数组 写 入 数 
据 ;off: 指定 数组 b 的 一 个 偏 移 位 置 ,从 哪个 位 置 的 字 节 开始 写 
入 ;len: 要 写 人 的 字 节 数量 


void flush() 清空 输出 流 
void close() 关闭 输入 流 或 输出 流 
3. 字符 流 


Java 中 的 字 节 流 是 用 于 处 理 字 节 的 输入 和 输出 的 ,包括 读 写 二 进 制 数据 等 方面 的 内 
容 。 同 字 节 流 类 似 ,字符 流 也 是 通过 两 个 顶层 的 抽象 类 Reader 和 Writer 的 子 类 来 实现 对 
Unicode 字符 流 的 处 理 , 如 图 10-5 和 图 10-6 所 示 。 


rC BufferReader )— LineNumberReader 
CharArrayReader 
InputStreamReader FileReader 
on === = 
FilterReader ——1  PushbackReader 


PipedReader 


StringReader 


图 10-5 Reader 类 结构 图 
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FilterWriter 
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10-6 Writer 类 结构 图 
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R 10-4 是 字符 流 的 几 个 常用 子 类 及 功能 。 
表 10-4 字符 流 常 用 子 类 及 功能 


字符 流 类 功能 简单 介绍 
StringReader 从 字符 串 读 取 的 输入 流 
StringWriter 写 人 字符 串 的 输出 流 
FileReader 从 文件 读 入 的 输入 流 
FileWriter 写 人 文件 的 输出 流 
PushbackReader 返回 一 个 字符 到 输入 流 ,主要 用 于 编译 器 的 实现 
PipedReader 输入 管道 
PipedWriter 输出 管道 
CharArrayReader 从 字符 数组 读 取 的 输入 流 
CharArrayWriter 写 人 字符 数组 的 输出 流 
BufferReader 缓冲 输入 流 
BufferWriter 缓冲 输出 流 
FilterReader 实现 了 InputStream 接口 的 过 滤 输入 流 
FilterWriter 实现 了 OutputStream 接口 的 过 滤 输出 流 
InputStreamReader 将 字 节 转换 为 字符 的 输入 流 
OutputStreamWriter 将 字 节 转换 为 字符 的 输出 流 


10.1.3 文件 上 传 


文件 上 传 功 能 使 用 免费 的 上 传 组 件 jspSmartUpload 来 实现 ,jspSmartUpload 组 件 可 以 
免费 下 载 ,下 载 后 文件 的 名 字 是 jspSmartUpload. zip。 解 压 该 文件 后 只 需要 将 web-inf 目录 
下 的 文件 复制 到 Web 应 用 程序 所 在 目录 的 WEB-INF 文件 夹 下 就 可 以 在 Web 程序 中 使 用 
上 传 组 件 了 。 

jspSmartUpload 包含 有 5 个 类 。 

(D File; 上 传 文件 的 抽象 表示 类 。 

(2) Files: 包含 多 个 上 传 文件 的 File 实例 。 

(3) Request: Ht F Servlet 的 ServletRequest 类 。 

(4) SmartUpload: 实现 上 传 的 类 。 

(5) SmartUploadException: 上 传 抛 出 的 异常 类 。 


10.2 实验 10.1 JSP 中 文件 读 写 


实验 目的 : 


(1) 掌握 JSP 中 读 写 文 件 的 方法 。 

(2) 了 解 File 类 的 创建 和 常用 的 方法 。 

(3) 了 解 随机 读 写 文件 类 RandomAccessFile 的 运行 原理 和 常用 的 方法 。 
(4) 练习 用 RandomAccessFile 实现 动态 文件 的 读 写 
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实验 内 容 : 


本 次 实验 用 于 读者 掌握 JSP 中 对 文件 的 读 写 技术 ,实验 完成 了 一 个 基于 Web 联系 人 地 
址 管理 程序 ,实现 了 联系 人 地 址 的 添加 删除 .修改 ,其 中 联系 人 地 址 信息 的 保存 采用 服务 器 
端的 文本 文件 ,利用 RandomAccessFile 来 实现 读 写 。 本 次 实验 由 3 个 练习 构成 。 

(1) 为 RandomAccessFile 读 写 文件 设计 后 台 JavaBean 程序 。 

(2) 实现 联系 人 地 址 的 读 取 。 

(3) 实现 联系 人 地 址 的 更 新 操作 ,包括 新 建 , 修 改 、 删 除 。 


实验 步骤 : 


练习 1: 设计 后 台 Java 程序 处 理 文件 读 写 。 

OD 启动 Java 开发 环境 ,新 建 一 个 Java 文件 FixedLengthStringIO. java, 用 来 实现 固定 
长 度 的 字符 串 的 读 写 , 当 字 符 串 长 度 不 足 固定 长 度 , 用 空格 来 补足 ;如 果 字 符 串 超过 固定 长 
度 则 截断 。 将 程序 清单 10-1 代码 输入 。 

程序 清单 10-1: 


//FixedLengthstringI0.java 
import java.io.*; 


public class FixedLengthStringIO { 
// 从 输入 流 in 中 读 入 固定 长 度 的 字符 串 
public static String readFixedLengthString (int size, DataInput in) 
throws IOException ( 
// 定 义 字 符 数组 
char []chars=new char[size]; 
// 读 取 size 个 字符 
for (int i=0; i«size; i++) 
chars [i]-in.readChar(); 
return new String (chars) ; 
} 


// 向 输出 流 out 写 和 固定 长 度 的 字符 串 
public static void writeFixedLengthString (String s, int size, DataOutput out) 
throws IOException ( 
char[] chars-new char[size]; 
// 将 字符 串 s 转换 成 字符 数组 chars 
S.getChars(0, s.length(), chars, 0); 
// 将 字符 串 截 断 或 者 补充 空格 来 控制 字符 串 为 固定 长 度 ， 
for (int i=Math.min(s.length(), size); i<chars.length; i++) 
chars[i]-' '; 
// 写 人 字符 串 
out.writeChars (new String (chars) ); 
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(2) 编译 程序 清单 10-1 中 的 Java 代码 FixedLengthStringIO. java. 检查 该 代码 是 否 能 
够 实现 固定 长 度 字符 串 的 读 写 。 

(3) 新 建 Java 文件 AddressBookIO. java, 利 用 程序 清单 10-1 中 的 代码 和 随机 读 写 文 件 
类 RandomAccessFile 实现 对 文本 地 址 短 的 读 写 ,将 程序 清单 10-2 中 代码 输入 。 

程序 清单 10-2: 


//AddressBookIO.java 
import java.io.* ; 


public class AddressBookIO { 


// 定 义 各 个 字段 的 固定 长 度 

final static int NAME SIZE-32; // 名 字 

final static int STREET SIZE-32; // 地 址 

final static int CITY SIZE-20; // 城 市 

final static int STATE SIZE-10; // 省 

final static int ZIP SIZE- 6; // 邮 编 

final static int RECORD SIZE- // 一 条 记录 的 长 度 


(NAME SIZE+ STREET SIZE+ CITY SIZE+ STATE SIZE*ZIP SIZE); 


private RandomAccessFile raf; // 指 定 关联 文件 
private int no; 
private String name- ""; 


private String street 


private String city=""; 
private String state- ""; 


private String zip-""; 


public AddressBookIO (RandomAccessFile initRaf) ( 
raf-initRaf; 


no-0; 


//get 和 set Jj i 
public int getAddressCount () ( 
int count-0; 
try { 
long lastPosition= raf. length () 7 
count- (int) lastPosition/(2* RECORD SIZE); 
) catch (Exception e) ( 
} 


return count; 


public String getName () { 
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return name; 


public void setName (String name) ( 


this.name-name; 


public String getStreet() { 


return street; 


public void setStreet (String street) ( 


this.street- street; 


public String getCity() ( 


return city; 


public void setCity (String city) { 
this.city-city; 


public String getState() { 


return state; 


public void setState (String state) { 


this.state=state; 


public String getZip() { 


return zip; 


public void setZip (String zip) { 
this.zip=zip; 


// 写 入 文件 方法 ,Position Jj 58 AME 
public void writeAddress (long position) throws IOException { 
raf .seek (position * 2* RECORD SIZE); 
FixedLengthStringIO.writeFixedLengthString (name, NAME SIZE, raf); 
FixedLengthStringIO.writeFixedLengthString (street, STREET SIZE, raf); 
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FixedLengthStringIO.writeFixedLengthString (city, CITY SIZE, raf); 
FixedLengthStringIO.writeFixedLengthString (state, STATE SIZE, raf); 
FixedLengthStringIO.writeFixedLengthString (zip, ZIP SIZE, raf); 


// 从 文件 中 读 出 内 容 

public void readAddress (long position) throws IOException { 
raf.seek(position* 2* RECORD SIZE); 
name- FixedLengthStringIO.readFixedLengthString (NAME SIZE, raf); 
street-FixedLengthStringIO.readFixedLengthString (STREET SIZE, raf); 
city-FixedLengthStringIO.readFixedLengthString(CITY SIZE, raf); 
state- FixedLengthStringIO.readFixedLengthString (STATE SIZE, raf); 
zip-FixedLengthStringIO.readFixedLengthString (ZIP SIZE, raf); 


public void addAnAddress ()throws IOException( 
writeAddress (getAddressCount () ) ; 


public void editAnAddress (long position) throws IOException( 
writeAddress (position); 


public void delAnAddress (long position) throws IOException( 
for (long i=position;i< getAddressCount () - 1;i++){ 
readAddress (i+ 1); 
writeAddress (i); 
} 
raf .setLength (raf .length()-2* RECORD SIZE); 


} 


(4) 编译 程序 清单 10-2 中 的 Java 代码 AddressBookIO. java, 检 查 该 代码 是 否 能 够 实现 
对 文本 文件 的 随机 读 写 ,并 注意 该 代码 实现 文本 地 址 夭 读 写 所 需要 的 参数 。 

练习 2: 实现 联系 人 的 读 取 。 

打开 ISP 开发 环境 ,新 建 一 个 JSP 文件 addresslistR. jsp ,部 分 代码 如 程序 清单 10-3 所 


IR VK JSP 程序 用 于 实现 对 地 址 文本 文件 address. txt 的 读 取 。 请 将 程序 清单 的 | 代码 惠 一 


代码 3 补充 完 整 ,在 Tomcat 服务 器 中 运行 程序 ,使 之 能 将 address. txt 中 的 地 址 信息 显 
m ,运行 结果 如 图 10-7 所 示 。 
程序 清单 10-3: 


«!- - addresslistR.jsp --> 
«$ 86 page language- "java" contentType- "text/html; charset=gb2312"% > 
«$6 page import-"java.io. * ,chapterl0. * "$> 
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<html> 


<head> 


«meta http- equiv= "Content- Type" content= "text/html; charset=gb2312"> 


«title» dh $8 9] d « /title> 
</head> 


<body> 


<% 


$> 


String path=getServletContext () .getRealPath (".")+File.separator 


+"ch10"+ File.separator+ "address.txt"; 


RandomAccessFile raf=|f€# 1| ; 


// 读 取 文 件 地 址 簿 列表 
AddressBookIO addressIO- new AddressBookIO (raf) ; 


String delPosition- request .getParameter ("position"); 
// 获 取 position 参数 的 值 
if(delPosition! -null)( 

addressIO.delAnAddress (Long.parseLong (delPosition)); 


out.print ("« h1» St ht $8 9] € « /n1» ") ; 

out.print ("< table border= 1 cellspacing- 1>"); 
out.print ("<tr><td width- V'20$ Vr» E% « /td» ") ; 
out.print ("< td width= V'40$ \"> Jl fil « /td» ") ; 
out.print ("< td width- V'10$ \"> Ji ili < /td>") ; 
out.print ("< td width= \"10% V» 4$ « /td» ") ; 
out.print ("< td width= V"20$ \"> ff 4i « /td» « /tr» ") ; 
try { 


for (int i=0; ic {A 2|; i++) ( 
// 依 次 显示 所 有 的 地 址 信息 
addressIo.| 伐 码 i3| ; 
// 读 取 第 二 条 地 址 信息 
out.print ("< tr» « td» "+ addressIO.getName ()+ "< /td» ") ; 
out.print ("<td> "+ addressIO.getStreet () * "« /td» ") ; 


out.print ("<td> "+ addressIO.getCity () * "« /td» ") ; 
out.print ("< td» "+ addressIO.getState ()+"< /td» ") ; 
out.print ("< td» "+ addressIO.getZip ()* "« /td» « /tr»"); 
) 
}catch (Exception e) {} 
out.print ("</table>"); 


< /body> 


</html> 
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图 10-7 ”地址 筹 读 取 列 表 


练习 3: 实现 联系 人 地 址 的 更 新 操作 ,包括 新 建 \ 修 改 和 删除 操作 。 


(1) 修改 程序 清单 10-3 中 addresslistR. jsp, 并 把 它 保存 为 addresslist. jsp ,在 其 中 添加 
联系 人 地 址 的 新 建 、 修 改 、 删 除 功能 。 


(2) 仔细 阅读 下 列 程序 清单 10-4 的 addresslistR. jsp. SUE BUY SEE. Hop. fS 1 


入 新 建 联系 人 链接 “二 a href — "addressdetail. jsp? mode— new" > ği </a>” ; FENG 2 Jit 


人 修改 链接 “二 a href — "addressdetail. jsp? mode= edit&-position = ji 5 " > ij Hk </a>”; 


ARH 3 LAC E HE HE“ <a href — "addresslist. jsp? position = fi 3" > WIR —/a-", ik 


意 : 对 于 修改 和 删除 两 个 链接 是 利用 编号 来 定位 。 然 后 启动 Tomcat 38 fT addresslist. jsp, 
使 得 运行 结果 如 图 10-8 所 示 。 
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图 10-8 ”加 入 “编辑 ”“ 删 除 ”链接 后 的 地 址 簿 读 取 列 表 
程序 清单 10-4: 
«!--addresslist.jsp --» 


<% 6 page language- "java" contentType- "text/html; charset- gb2312"$ > 
«$6 page import= "java.io. * ,chapterl0. * "$5 
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<html> 


<head> 


«meta http- equiv= "Content- Type" content= "text/html; charset=gb2312"> 


<title> 地 址 短 列 表 < /title> 
</head> 
<body> 


<% 


$5 


String path=getServletContext () .getRealPath (".")+File.separator 


+"ch10"+ File.separator+ "address.txt"; 
RandomAccessFile raf=new RandomAccessFile (path, "rw"); 
// 读 取 文 件 地 址 德 列表 
AddressBookIO addressIO- new AddressBookIO (raf) ; 
String delPosition- request .getParameter ("position"); 
if (delPosition! -null)( 
addressIO.delAnAddress (Long.parseLong (delPosition) ) ; 
} 
out.print ("« h1» Ji Ji $E 9i] Be < /n1» ") ; 
out.print (ARE 1]) ; 
// 答 出 新 建 链接 
out.print ("< table border= 1 cellspacing- 1>"); 
out.print ("<tr><td width= V'10$ \"> 4i fit « /td>") ; 
out.print ("< td width= V'10$ \"> fl BR< /ta» ") ; 
out.print ("< td width= \"208 \"> lE « /td» ") ; 
out.print ("< td width= \"30% Vr» dil i « /td» ") ; 
out.print ("< td width= V'10$ V» Ji ili < /ta» ") ; 
out.print ("< td width= \ "10% V» 4$ « /td» ") ; 
out.print ("< td width= \ "10% \"> 邮 编 < /td» « /tr» ") ; 
try { 
for (int i=0; i«addressIO.getAddressCount(); i++) { 
addressIO.readAddress (i); 
out .print1n (| f€# 2]) ; 
// 输 出 编辑 链接 
out.println (| 代码 |); 
// 输 出 删除 链接 
out.print ("<td> "+ addressIO.getName ()+ "< /td» ") ; 
out.print ("<td> "+ addressIO.getStreet () * "« /td» ") ; 
out.print ("<td> "+ addressIO.getCity ()-* "« /td» ") ; 
out.print ("<td> "+ addressIO.getState () * "< /td» ") ; 
out.print ("<td> "+ addressIO.getZip ()-* "« /td» « /tr» "); 
) 
) catch (Exception e) ( 
) 
out.print ("</table>"); 
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< /body» 

</html> 

(3) 下 列 程序 清单 10-5 定义 了 一 个 JSP X fF addressdetail. jsp, 它 用 于 实现 地 址 的 编 
辑 和 新 建 , 在 addressdetail. jsp 中 利用 表单 实现 了 单个 地 址 信息 的 新 建 和 输入 ,由 于 编辑 和 
新 建 共用 这 个 文件 ,所 以 依靠 mode 输入 参数 来 区 分 这 两 种 操作 ,如果 mode 的 值 为 new, 表 
示 新 建 地 址 ,否则 表示 为 编辑 地 址 。 请 将 | 代码 和 一 | 代码 6 补充 完整 ,实现 单个 地 址 信息 的 
新 建 和 输入 功能 。 

程序 清单 10-5: 


<!--addressdetail.jsp --> 
«$8 page contentType- "text/html; charset=gb2312" language- "java"$ > 
«$8 page import- "chapterlO.* , java.io. * "$> 
«html» 
<head> 
«title» AddressBook« /title> 
< /head» 
<% 
String path= getServletContext () .getRealPath (".")+File.separator 
* "ch10"4 File.separator+ "address.txt"; 
RandomAccessFile raf- new RandomAccessFile (path, "rw"); 
// 读 取 文 件 地 址 簿 列表 
AddressBookIO addressIO- |f 4|; 
// 创 建 保存 地 址 信息 的 对 象 addressIO 
String action= request . {R14 5| ; 
// 获 取 mode 的 值 
String actiontype=""; 


String actionaim- ""; 

String editposition- ""; 

ir (ARMS ep) ( 
// 判 断 mode 参数 的 值 是 否 是 new 
actiontype- "新 建 一 个 地 址 信息 "; 
actionaim- "addanaddress.jsp"; 


) else ( 
actiontype- "编辑 地 址 信息 "; 
editposition= request .getParameter ("position"); 
actionaim= "editanaddress.jsp?position- "« editposition; 
addressIO.readAddress (Long.parseLong (editposition)); 
} 
$» 
<body> 
<hl>< %=actiontype% >< /hl> 
<hr> 
< form action="< $=actionaim’ >" method= "post"> 
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«table border- "0" cellspacing- "0"> 
«tr» 
«td» li :« /td» 
«td» 
«t 
if (action.equals ("new") ) 
out.print ("<input type=\"text\" size=\"40\" name= \"name\">") ; 
else 
out.print ("< input type=\"text\" size=\"40\" name= \"name\" value=" 
+addressIO.getName()+">"); 
$> 
</td> 
</tr> 
«tr» 
<td> Jti i « /td> 
«td» 
<% 
if (action.equals ("new") ) 
out.print ("< input type= V'textV" size=\"40\" name= \"street\"> ") 7 
else 
out.print ("< input type= V'textV" size=\"40\" name= V'streetV" value= V" 
* addressIO.getStreet ()+"\" >"); 
$> 
</td> 
</tr> 
<tr> 
<td> 城 市 : < /td> 
«td» 
<% 
if (action.equals ("new") ) 
out.print ("< input type=\"text\" size=\"40\" name=\"city\">") 7 
else 
out.print ("<input type=\"text\" size=\"40\" name=\"city\" value= \"" 
+addressIO.getCity()+"\" >"); 
$> 
</td> 
</tr> 
«tr» 
«td». </td> 
«td» 
«t 
if (action.equals ("new") ) 
out.print ("<input type=\"text\" size=\"40\" name=\"state\">"); 
else 
out.print ("<input type=\"text\" size=\"40\" name= V'stateV" value=\"" 
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- addressIO.getState ()-* "^" >"); 
$» 
«/td» 
«/tr» 
«tr» 
<td> 邮 编 : < /td> 
«td» 
<% 
if (action.equals ("new") ) 
out.print ("<input type=\"text\" size- V'40V" name=\"zip\">"); 
else 
out.print ("< input type=\"text\" size=\"40\" name= V'zipV" value- V" 
+addressIO.getZip()+"\" >"); 
$> 
</td> 
</tr> 
</table> 
«input type="submit" value= "fib 4e "> 
</form> 
< /body> 
« /html» 


(4) TE Tomcat 服务 器 中 测试 列表 文件 addressdetail. jsp ,检查 运行 效果 。 

(5) 新 建 addanaddress. jsp 和 editanaddress. jsp, 它 们 分 别 用 于 实现 对 一 个 地 址 信息 的 
加 入 和 修改 ,它们 的 部 分 代码 如 程序 清单 10-6 和 程序 清单 10-7 所 示 。 这 两 个 JSP 文件 又 
需要 用 到 练习 1 中 设计 的 类 AddressBookIO 来 实现 对 后 台 文件 的 读 写 。 请 仔细 阅读 这 两 
AUT. Fr LI 7| ARES 10 | 补充 完整 ,实现 题 意 的 要 求 。 

程序 清单 10-6: 

< ! - - addanaddress.jsp - -> 


< % 6 page contentType- "text/html; charset=gb2312" language- "java"$ > 
«$6 page import="chapterl0. * ,java.io. * "$5 


<% ! String trans (String origin) { 
String result=null; 
try { 
byte[] temp- origin.getBytes ("iso- 8859- 1"); 
result- new String (temp, "gb2312"); 
) catch (UnsupportedEncodingException usee) ( 
} 


return result; 


$5 
<% 
String path=getServletContext () .getRealPath (".")+File.separator 
+"ch10"+ File.separator+ "address.txt"; 
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RandomAccessFile raf- new RandomAccessFile (path, "rw"); 
AddressBookIO addressIO- new AddressBookIO (raf); 
addressIO.setName (trans (request .getParameter ("name") )) ; 
addressIO.setStreet (trans (request .getParameter ("street"))); 
addressIO.setCity (trans (request .getParameter ("city"))); 
addressIO.setState (trans (request .getParameter ("state"))); 
addressIO.setZip (trans (request.getParameter ("zip"))); 


addressIO.| {tf 7|; 
// 添 加 新 地 址 信息 

response.| 代码 8| ; 
// 转 向 至 addresslist.jsp 


$> 
程序 清单 10-7: 


<!--editanaddress.jsp --> 
«$6 page contentType- "text/html; charset=gb2312" language- "java"$ > 
«$6 page import- "chapterlO. * ,java.io. * "%> 
<% ! String trans (String origin) { 
String result-null; 
try ( 
byte[] temp- origin.getBytes ("iso- 8859- 1"); 
result=new String (temp, "gb2312"); 
) catch (UnsupportedEncodingException usee) { 
) 
return result; 


$> 
<% 
String path=getServletContext () .getRealPath (".")+File.separator 
+"ch10"+ File.separator+ "address.txt"; 
RandomAccessFile raf- new RandomAccessFile (path, "rw"); 
/ [ACC ^F jb db A e 
AddressBookIO addressIO- new AddressBookIO (raf); 
String editPosition- request.getParameter ("position"); 
addressIO.setName (trans (request .getParameter ("name"))) ; 
addressIO.setStreet (trans (request .getParameter ("street"))); 
addressIO.setCity (trans (request .getParameter ("city"))); 
addressIO.setState (trans (request .getParameter ("state"))); 
addressIO.setZip (trans (request.getParameter ("zip"))); 
if (editPosition! -null) 
addressIO.| 448 9|; 
// 修 改 地 址 信息 
response .| 代码 0 ; 
// 跳 转 到 addresslist.jsp 
S> 
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(6) 参考 程序 清单 10-6 和 10-7 ,设计 delanaddress. jsp 文件 ,实现 地 址 的 删除 。 


(7) 保存 以 上 代码 ,并 启动 Tomcat 服务 器 进行 测试 ,检查 程序 是 否 能 正常 完成 上 述 的 
要 求 , 运 行 效果 如 图 10-9 所 示 。 


AddressBook — Microsoft Internet Expl... [|[©|[ 
RG) SEO 查看 KRW IAM hw LJ 


Qa- O- DAO xim ” 
MED [Bno ea e [:L M 下 二 


编辑 地 址 信息 


姓名 : mm 

地 址 。[ 文 三 路 1200 号 
城市 ，| 杭 州 
省 。 [p 
邮编 ，|[310000 


图 10-9 ”对 单个 联系 人 地 址 进行 修改 


10.3 实验 10.2 JSP 中 文件 目录 的 访问 
实验 目的 : 


(1) 掌握 JSP 中 读 写 文件 的 方法 。 
(2) 了 解 File 类 的 创建 和 对 文件 信息 的 读 取 。 
(3) 了 解 如 何 判 断 目 录 和 文件 ,并 掌握 多 层次 目录 读 写 的 方法 。 


实验 内 容 : 


本 次 实验 用 于 读者 掌握 JSP 中 对 文件 和 目录 信息 的 读 写 技术 ,实验 完成 了 服务 器 当前 
地 址 下 文件 和 目录 列表 的 访问 的 任务 。 本 次 实验 由 两 个 练习 构成 。 

(1) 读 取 当 前 目录 下 文件 并 用 列表 显示 。 

(2) 读 取 当前 目录 下 文件 和 目录 列表 ,并 实现 目录 列表 的 层次 访问 。 


实验 步骤 : 


练习 1: 读 取 当 前 目录 下 文件 并 用 列表 显示 。 

CD 启动 JSP 开发 环境 ,新 建 一 个 JSP 文件 simplefilelist. jsp, 用 来 实现 对 服务 器 目录 
的 文件 访问 。 将 程序 清单 10-8 代码 输入 。 

程序 清单 10-8 : 


<!--simplefilelist.jsp --> 
<%@page contentType- "text/html; charset=gb2312" language- "java"$ > 
« q70 * 


«$8 page import="java.io. * "$5 
«html» 
<head> 
<title> 简 单 文件 列表 < /title> 
</head> 
<body> 
«hl» 
服务 器 文件 列表 /如 下 
</hl> 
<% 
String file=application.getRealPath ("/"); 
File f=new File (file); 
String[] fileNames=f.list (); 
File[] fileObjects=f.listFiles (); 
s» 
«table border=0 cellspacing- 0 width= 100% > 
ctr» 
«td width=30% > 文件 名 < /td> 
«td width- 70$ > X /|« /td» 
</tr> 
«t 
for (int i=0; i«fileObjects.length; i++) { 
if (!fileObjects[i].isDirectory()) { 
$> 
<tr> 
<td width= 30% ><a href- "«$- fileNames [i]$ » "»« $- fileNames [i]$ >< /a» « /td» 
«td width= 70$ >< $—- Long. toString (fileObjects[i].length())$ >bytes< /td» 
<% 
) 


) 
$> 
</tr> 
</table> 
< /body> 
</html> 


(2) 保存 并 在 Tomcat 服务 器 中 测试 ,检查 运行 效果 是 否 如 图 10-10 所 示 。 

练习 2: 读 取 当前 目录 下 文件 和 目录 列表 .并 实现 目录 列表 的 层次 访问 。 

(1) 打开 JSP 开发 环境 ,修改 simplefilelist. jsp 并 保存 为 filelist. jsp. EH PIM Ax A 
录 访 问 的 功能 ,并 实现 通过 dir 参数 来 访问 子 目 录 列 表 。 修 改 方法 见 程序 清单 10-9 。 

程序 清单 10-9 : 


<!--filelist.jsp --> 
<%@page contentType- "text/html; charset=gb2312" language- "java"$ > 
«$6 page import="java.io. * "$5 


= 1071 * 


2 简单 文件 列表 — Nicrosoft Internet Explorer (rey) 
RHO SEO SEW KEW TAG Boo m" 
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地 址 四 (Æ) neep://Localhost:8080/J=pLabBook/chi M| [EQ FA tie > E ~ 


服务 器 文件 列表 / 如 下 


文件 名 大 小 
login. htm 585bytes 
address. txt 400bytes 


图 10-10 服务 器 文件 列表 访问 


<html> 
<head> 
<title> 文 件 列表 < /title» 
< /head» 
<body> 
<% 
String dir= request.getParameter ("dir"); 
if(dir--null) 


dir="; 

$> 

<hl> 服 务 器 文件 列表 /<s=dirs> 如 下 
€ /hl» 

<% 


String file=application.getRealPath ("/") ; 
if (! dir.equals("")) { 
file=file+File.separator+ dir; 
} 
File f=new File (file); 
String[] fileNames=f.list (); 
File[] fileObjects- f.listFiles(); 
$> 
<table border- "1" cellspacing- "1" width= "100% "> 
<tr> 
<td width= "30$ "> 
文件 名 
</td> 
«td width= "70$ "> 
大 小 
«/td» 
«/tr» 
<% 
for (int i=0; i«fileObjects.length; i++) ( 
if (!fileObjects[i].isDirectory()) { 
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S> 
«te 
«td width- "30$ "> 


«a href- "« $—-fileNames[i]$» "»«$-fileNames[i]$ ></a> 
</td> 
«td width= "70$ ">< %=Long. toString (fileObjects[i] .length())%>bytes 
</td> 
<% 
jelse{ 
String path="filelist.jsp?dir="+ fileNames [i]; 
$> 
<td width= "30$ "> 
<a href="< %$=path% >"> [<%=fileNames[i]%>]</a> 
</td> 
<td width="70"> 
&nbsp; 
« /td» 
<% 
) 
$> 
</tr> 
<% 
} 
$> 
« /table» 
< /body» 
« /html» 


(2) 保存 并 测试 JSP 文件 ,得 到 如 图 10-11 所 示 效 果 , 并 测试 该 JSP 文件 是 否 能 按照 实 
验 要 求 工 作 。 


F Xf - Wicrosoft Internet Explorer 
DO REO SEV hea IAW ha 


Oa- O- AG lx ke 6 3-3 BL 


@) http: //ocalhost :8080/JspLabBook/chi0/filelist. jsp 


服务 器 文件 列表 / 如 下 


文件 名 大 小 
META-INF 
WEB-INF. 
[temp] 
[ch10] 

login.htm 585bytes 

address. txt 400bytes 


图 10-11 服务 器 文件 及 目录 的 列表 
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10.4 实验 10.3 JSP 中 文件 的 上 传 与 下 载 


实验 目的 : 


(1) 掌握 JSP 中 读 写 文件 的 方法 。 

(2) 了 解 JSP 中 文件 上 传 下 载 的 原理 。 

(3) 了 解 jspSmartUpload. jar. 上 传 组 件 的 基本 结构 和 使 用 方法 。 
(4) 练习 ISP 中 文件 的 上 传 和 在 服务 器 端的 保存 。 


实验 内 容 : 


本 次 实验 用 于 读者 掌握 JSP 中 文件 上 传 技 术 , 实 验 模拟 了 一 个 简单 的 学 生 实 验 报告 上 
传 程序 ,学 生 用 学 号 登录 ,允许 查看 自己 已 经 上 传 的 实验 文件 和 实现 实验 文件 的 上 传 操 作 。 
为 了 便于 管理 ,在 服务 器 新 建 lab 目录 ,用 于 保存 学 生 上 传 的 文件 ,并 为 每 个 学 生 按 照 登录 
名 建立 目录 ,在 其 中 建立 实验 1-4 的 子 目录 labl-4。 学 生 的 实验 文件 上 传 后 保存 在 自己 的 
目录 中 对 应 实验 子 文件 夹 中 。 


实验 步骤 : 


A) 打开 Web 开发 环境 ,新 建 一 个 文件 login. htm, 用 于 学 生 的 登录 ,学 生 按 照 学 号 或 
者 姓名 登录 后 定位 到 对 应 的 个 人 文件 夹 中 ,将 程序 清单 10-10 输入 。 
程序 清单 10-10: 


<!--login.htm --> 
<html> 

<head> 

<title> 登 录 页 面 < /title» 
< /head» 


<body> 
<hl> 实 验 作业 上 传 <br></hl> 
< form name= "forml" method= "post" action- "uploadform.jsp"> 
<table border- "0" cellspacing- "0" cellpadding- "0"> 
<tr> 
<td height="18" align="right"> 
<div align="right">} : </div></td> 
<td><input name="name" type="text" size="20">< /td> 
«td colspan- "2"> &nbsp; &nbsp; 
<input type="submit" name- "Submit" value=" "> 
«/td» 
«/tr» 
</table> 
</form> 
</body> 
</html> 
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(2) 保存 并 测试 html 文件 ,检查 运行 效果 如 图 10-12 所 示 。 


实验 作业 上 传 


学 号 ， 


图 10-12 学 生 实 验 作业 上 传 登录 


(3) 新 建 uploadform. jsp 文件 ,要 求实 现 用 户 显示 登录 学 生 的 实验 文件 上 传情 况 和 实 
现实 验 文 件 上 传 功能 。 仔 细 阅 读 程序 清单 10-11 ,请 将 | 伐 码 划一 | 代码 4 补充 完整 。 
程序 清单 10-11: 


<!--uploadform.jsp --> 
«$6 page contentType- "text/html; charset=gb2312" language- "java"$ > 
«$6 page import="java.io. * "$> 
«html» 
<head> 
«meta http- equiv= "Content- Type" content= "text/html; charset=gb2312"> 
<title> 学 生 实验 文件 列表 < /title> 
< /head» 
<% 
// 读 取 学 生 的 学 号 ,并 存放 session 对 象 中 
if (request .getParameter ("name") ! - nu11) ( 


session.setAttribute ("name", (RH 1]) ; 


) 
// 打 开学 生 的 实验 对 应 文件 目录 
String file=application.getRealPath ("/lab") ; 


file= file+File.separator+ session.getAttribute ("name") ; 


// 得 到 该 实验 目录 下 的 所 有 实验 文件 


File 全 | 代码 3|; 
if(f!-null&&! f.exists()) 
f. 19 3; 
S> 
<body> 
<hl><%=session.getAttribute ("name") $ > [i] ^: ,您 好 ! 
</hl> 
<hr> 


«table border- "1" cellspacing- "1" width= "600"> 
«tr» 
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«td width= "200"» 
实验 名 称 
«/td» 
«td width= "400"» 
已 经 提交 实验 文件 列表 
</td> 
xit 
<% 
// 遍 历 学 生 的 4 个 实验 文件 夹 
for (int i=1;i<=4;i++){ 
String labN="lab"+ i; 
File subf=new File (file+File.separator+ labN) ; 
if(subf!-null&&! subf.exists()) 
subf .mkdir () ; 
String[] fileNames- subf.list(); 
File[] fileObjects=subf.listFiles () ; 
out.print ("<tr> <td> IG i+ "< /td» "); 
out.print ("< td» &nbsp;") ; 
for (int j=0; j« fileObjects.length; j++) { 
if(!fileObjects[j].isDirectory()) t 
out.print ("<a href- V". ./1ab/"* session.getAttribute ("name") + "/lab"+ i+ "/"+ 
fileNames [j]+"\">"+ fileNames [j]+ "< /a> "+ "&nbsp; "); 


} 
out.print ("</td>"); 
out.print ("</tr>"); 
} 
$> 
</table> 
<hr> 
<b> 实 验 文件 上 传 < /b> 


< form method="post" action="upload.jsp" [Rg 4| 


«table border- "0" cellspacing- "0" cellpadding- "0"> 
«tr 
«td» 
选择 实验 
</td> 
«td» 
<select name="labName"> 
<option value- "labl" selected» 
实验 1 
< /option» 
«option value= "lab2"> 
实验 2 
< /option» 
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<option value- "lab3"» 
实验 3 
< /option» 
<option value= "lab4"» 
实验 4 
< /option» 
</select> 
</td> 
</tr> 
«tr» 
«td» 
实验 报告 (* .doc) 
</td> 
«td» 
«input name- "filel" type- "file" size="40"> 
</td> 
</tr> 
«tr» 
«td» 
实验 代码 (x* .rar) 
</td> 
«td» 
«input name- "file2" type- "file" size- "40"> 
</td> 
</tr> 
<tr> 
«td colspan- "2"> 
«input type="submit" name- "Submit" value=" E f£ "> 
</td> 
</tr> 
</table> 
</form> 
< /body> 
</html> 


(4) f£ uploadform. jsp 学 生 选 择 了 需要 上 传 文件 后 ,将 由 upload. jsp 来 实现 上 传 和 保 
T£ Wr upload. jsp 文件 ,将 程序 清单 10-12 输入 。 
程序 清单 10-12 : 


«!--upload.jsp --> 
<% 6 page language- "java" import="com.jspsmart .upload. * "> 
<html> 

<head> 

«meta http- equiv= "Content- Type" content= "text/html; charset=gb2312"> 
</head> 
«jsp:useBean id= "mySmartUpload" scope= "page" 
spe s 


class= "com.jspsmart .upload.SmartUpload"/> 
<body> 
<% 
try { 
int count=0; 
mySmartUpload. initialize (pageContext) ; 
mySmartUpload.setMaxFileSize (10000000) ; 
mySmartUpload.setTotalMaxFileSize (10000000) ; 
mySmartUpload.setAllowedFilesList ("doc, rar") ; 
mySmartUpload.setDeniedFilesList ("exe, bat") ; 
mySmartUpload.upload () ; 
String stu= (String) session.getAttribute ("name") ; 
String labN-mySmartUpload.getRequest () .getParameter ("labName") ; 
for (int i=0; i«mySmartUpload.getFiles().getCount(); i++) { 
File myFile=mySmartUpload.getFiles () .getFile (i); 
if (!myFile.isMissing()) { 
myFile.saveAs ("/lab/"+ stu "/"+ labN+ "/"+myFile.getFileName (), 
SmartUpload.SAVE_VIRTUAL) ; 


} 

response .sendRedirect ("uploadfomn. jsp"); 
) catch (Exception e) { 

out.println(e); 


$> 
< /body> 
</html> 


(5) 保存 并 在 Tomcat 服务 器 中 测试 ,检查 是 否 能 得 到 如 图 10-13 的 效果 。 


A 学 生 实验 文件 列表 - Microsoft Internet Explorer 
Re) RBG) FEV KEA TAD 帮助 中 
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地 址 四 ) | 四 http: //Localhost:6080/JspLabBook/chi0/uploadform. jsp 


20080002 同 学 ， 您 好 ! 


BEER 已 经 提交 实验 文件 列表 

实验 1 实验 报告 . doc 实验 数据 . rar 
实验 2 
实验 3 实验 报告 3. doc 实验 
实验 4 

实验 文件 上 传 
选择 实验 

实验 报告 (+. doc) 
实验 代码 (+. rar) 
(ER) 


图 10-13 学 生 实验 文件 列表 和 上 传 
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第 11 章 JSP 访问 Web 数据 库 


JSP 开发 离 不 开 数 据 库 编程 ,几乎 所 有 的 JSP 开发 都 和 数据 库 有 关 , JSP 中 提供 了 通过 
JDBC 接口 访问 数据 库 的 方法 ,大 大 简化 了 JSP 数据 库 开发 的 难度 。 本 章 将 通过 几 个 实验 
帮助 读者 掌握 JSP 中 访问 数据 库 的 方法 。 


11.1 预备 知识 


11.1.1 JDBC 基本 概念 


JDBC(Java DataBase Connectivity) 是 一 种 用 Java 实现 的 数据 库 接口 技术 ,是 开放 数据 
库 ODBC 的 Java 实现 。 用 JDBC 开发 数据 库 应 用 的 原理 如 图 11-1 所 示 。 


Java Application 


JDBC API 


JDBC Manager 


JDBC Driver API 


JDBC-Net| | JDBC-ODBC Driver Driver 
Driver Bridge Driver A B 
ODBC and JDBC 
DB Drivers implementation 
alternatives 
published proprietary database access protocols 
protocol 


图 11-1 JDBC 工作 原理 


由 图 11-1 可 知 ,JDBC 由 两 层 组 成 。 上 面 一 层 是 JDBC API, 负 责 与 Java 应 用 程序 通 
信 , 向 Java 应 用 程序 提供 数据 (Java 应 用 程序 通过 JDBC 中 提供 的 相关 类 来 管理 JDBC 的 驱 
动 程序 ) 。 下 面 一 层 是 JDBC Driver API, 主要 负责 和 具体 数据 环境 的 连接 。 


11.1.2 数据 库 的 连接 方式 


总 体 来 说 ,有 4 种 数据 库 连 接 的 方式 。 

(D JDBC-ODBC 桥 。 通 过 JDBC-ODBC 桥 , 可 以 将 JDBC 对 数据 库 的 操作 映射 为 
ODBC 对 于 数据 库 的 操作 。 

(2) 部 分 Java, 部 分 数据 库 专用 API。 这 种 方式 使 用 Java 实现 和 数据 库 专用 API 混合 
方式 连接 。JDBC 驱动 将 标准 的 JDBC 调用 转化 为 对 数据 库 API 的 本 地 调用 。 

(3) 中 间 件 访问 。 这 种 访问 方式 将 JDBC 的 操作 指令 转换 为 驱动 程序 厂商 自己 定义 的 
网 络 协议 ,该 网 络 协议 是 与 DBMS 无 关 的 。 通 过 协议 访问 某 种 特定 的 中 间 件 服务 器 。 这 个 
特定 的 中 间 件 服务 器 往往 位 于 Web 服务 器 或 者 数据 库 服务 器 上 。 然 后 由 这 个 中 间 件 服务 
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器 将 网 络 协议 再 转换 为 某 种 特定 的 DBMS 协议 ,来 调用 数据 库 。 数 据 库 处 理 的 结果 也 将 按 


照相 反 的 过 程 返回 给 Java 程序 端 。 


(4) 纯 Java 驱动 访问 。 这 种 访问 方式 使 用 厂商 专用 的 驱动 程序 ,把 JDBC 对 数据 库 的 
操作 直接 转换 为 针对 某 种 数据 库 进行 操作 的 本 地 协议 。 


11.1.3 JDBC 常用 接口 


JDBC 定义 了 很 多 的 接口 种 类 ,在 JDBC API 中 对 数据 库 的 应 用 主要 是 对 DriverManager、 
Connection, Statement 和 ResultSet 这 几 个 类 和 接口 的 使 用 ,它们 的 调用 结构 如 图 11-2 所 
示 , 在 本 节 中 ,将 对 这 个 几 个 类 和 接口 做 简要 的 说 明 。 


| Connection 


DriverManager 


Connection | Connection 


| 


Statement Statement 


Statement 


ResultSet 


ResultSet | 


图 11-2 JDBC 主要 接口 的 调用 结构 


1. DriverManager 类 


DriverManager 类 是 JDBC 的 管理 层 , 作 用 于 用 户 和 驱动 程序 之 间 。 它 跟踪 可 用 的 驱动 
程序 ,并 在 数据 库 和 相应 驱动 程序 之 间 建 立 连接 。 


如 下 代码 所 示 : 


try{ 
// 装 载 MySQL 5.0 驱动 


Class.forName ("com.mysql .jdoc.Driver") .newInstance () ; 


/ 3 SQL Server 5.0 驱动 


Class.forName ("com.microsoft.jdbc.sqlserver.SQLServerDriver ") .newInstance () ; 


// 装 载 SOL Server 2005 驱动 


Class.forName ("com microsoft .sqlserver.jdbc.SQLServer" 


/ P Oracle 驱动 


Class.forName ("oracle.jdbc.driver.OracleDriver") .newInstance () ; 


catch (ClassNotFoundException e) { 


// 若 装载 失败 , 则 抛 出 ClassNotFoundException 


2. Connection 接口 


Connection 是 与 数据 库 的 连接 对 象 ,也 就 是 在 已 经 加 载 的 Driver 和 数据 库 之 间 建 立 连 接 。 


如 下 代码 所 示 : 


try{ 
// 根 据 URL 建立 连接 
+ 180 + 


Connection conn- DriverManager.getConnection (url, user, password) ; 
}catch (SQLException e) { 
// 若 建立 连接 失败 , 则 抛 出 SQLException 
H 
3. Statement 接口 
Statement 用 于 将 SQL 语句 发 送 到 数据 库 中 ,并 获取 指定 SQL 语句 的 结果 。 
Statement 对 象 由 Connection 对 象 的 createStatement() 方 法 创建 ,如 下 列 代 码 所 示 : 


Connection con=DriverManager.getConnection (url, "root",""); 


Statement stmt=con.createStatement () ; 


Statement 对 象 用 于 执行 不 带 参 数 的 简单 SQL 语句 , 它 的 典型 使 用 是 用 executeQuery 
执行 查询 ,用 executeUpdate 执行 更 新 ,如 下 代码 : 

Statement stmt= con.createStatement () ; 

// 以 下 代码 执行 从 表 employee 中 查询 所 有 内 容 

ResultSet rs- stmt.executeQuery ("select * from employee"); 

// 以 下 代码 执行 删除 表 employee 中 一 条 记录 

int changedLine- stmt .executeUpdate ("delete from employee where id= '0005'"); 

4. ResultSet 类 

ResultSet 结果 集 对 象 负责 存储 数据 库 查询 的 结果 ,并 提供 一 系列 方法 对 数据 库 进 行 增 
加 、 删 除 和 修改 操作 。 


11.2 实验 11.1 JSP 中 数据 库 的 连接 


实验 目的 : 


(1) 掌握 JDBC 的 基本 结构 和 主要 接口 使 用 方法 。 

(2) 学 会 在 JSP 中 连接 数据 库 的 方法 。 

(3) 能 够 处 理 JSP 连接 数据 库 时 可 能 出 现 的 问题 和 异常 。 
(4) 学 会 使 用 SQLException 类 。 


实验 内 容 : 


本 次 实验 训练 读者 掌握 JSP 连接 数据 库 的 技术 ,实验 模拟 了 数据 库 的 连接 ,连接 的 相 
关内 容 由 用 户 输入 。 通 过 这 次 实验 可 以 了 解 到 数据 库 连接 可 能 出 现 的 问题 和 原因 ,帮助 以 
后 开发 正确 的 数据 库 程 序 。 


实验 步骤 : 


CD 本 实验 中 需要 用 到 MySQL 5. 0, SQL Server 2005 .Oracle log 数据 库 ,安装 并 调试 
以 上 数据 库 系统 ,建立 相应 的 测试 数据 库 。 下 载 对 应 数据 库 的 JDBC 驱动 并 在 测试 环境 中 
安装 和 设置 好 环境 变量 。 
(2) 打开 JSP 开发 环境 ,新 建 一 个 JSP 文件 testconn. jsp, 用 于 实现 对 各 种 数据 库 的 连 
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接 , 将 程序 清单 11-1 中 的 代码 输入 。 
程序 清单 11-1: 


<!--testconn.jsp--> 
< % @ page contentType- "text/html ; charset=gb2312"% > 
<%@page import-"java.sql.* "> 
<html> 
<head> 
<title> 数 据 库 连 接 测 试 < /title> 
< /head> 
<body> 
<% 
String btConn= request .getParameter ("conn") ; 
String driver-""; 
String url-""; 
if (btConn! -null)( 
String dbms- request .getParameter ("dbms") ; 
String db= request .getParameter ("database"); 
String user- request.getParameter ("user") ; 
String pass= request .getParameter ("pass") ; 
if (dbms.equals ("mysql") ) { 
driver= "com.mysql.jdbc.Driver"; 
url= "jdbc :mysql : //localhost/"+ db; 
Jelse if (dbms.equals ("sqlserver") ) { 
driver- "com.microsoft.sqlserver.jdbc.SQLServerDriver"; 
url-"jdbc:sqlserver://localhost:1433;DatabaseName- "+ db; 
Jelse if (dbms.equals ("oracle") ) { 
driver- "oracle.jdbc.driver.OracleDriver"; 
url="jdbc:oracle:thin:@ localhost :1521:"+ db; 
} 
// 尝 试 连接 
try { 
Class .forName (driver) .newInstance () ; 
Connection conn= DriverManager.getConnection (url, user, pass); 
if (conn!-null)( 
out.print ("< h3» Jf 4 PEJE B RI ARE < /n3» ") ; 
out.print ("<p> 数 据 库 驱 动 程序 "+ driver "< /p» "); 
out.print ("< p» XE f£ ^r f$ th J& "4+ url+ "< /p» ") ; 
} 
conn.close(); 
) catch (SQLException sqle) ( 
out.print (sqle.getSQLState ()+" "); 
out.print (sqle.getMessage () ) 7 
out.print ("<p> 数 据 库 驱 动 程序 "+ driver+ "< /p» "); 
out.print ("<p> 连 接 字符 串 是 "+urlt "< /p»"); 
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} catch (Exception e) { 
out.print (e.toString()); 
H 
out.print ("<hr>"); 
H 


b> 
<!-- 用 户 连接 选择 --> 
< form action-testconn.jsp method= "post"> 
<table border- "0" cellspacing- "0"> 
«tr» 
<td> 数 据 库 系 统 : </td> 
«td» 
<select name- "dbms"> 
<option value= "mysql"» MySQI« /option> 
<option value- "sqlserver" selected» SQL Server 2005« /option> 
<option value- "oracle"? Oracle« /option» 
</select> 
</td> 
</tr> 
<tr> 
«td» YE HORAE : < /ta» 
<td><input type="text" size= 30 name- "database"» « /td> 
</tr> 
<tr> 
<td> 用 户 名 : </td> 
«td»«input type- "text" size- 30 name= "user">< /td> 
</tr> 
<tr> 
«td» i: < /td> 
<td><input type="password" size- 30 name- "pass">< /td> 
</tr> 
</table> 
«input type="submit" value= "连接 " name= "conn"> 
</form> 


< /body> 
</html> 


(3) 保存 testconn. jsp, 分 别 启动 上 述 3 个 数据 库 服 务 ,启动 Tomcat 服务 器 ,测试 
testconn. jsp, 运 行 效果 如 图 11-3 所 示 。 

(4) 输入 一 个 正确 的 数据 库 名 、 用 户 名 和 密码 , 单 击 “ 连 接 " 按 钮 ,程序 将 显示 成 功 连接 
到 数据 库 ,并 反馈 给 用 户 连接 驱动 程序 和 连接 字符 串 等 信息 ,如 图 11-4 所 示 。 

(5) 分 别 输入 错误 的 数据 库 名 .用户 名 、 密 码 测试 ,程序 将 无 法 连接 到 数据 库 , 并 反馈 错 
误 的 基本 信息 。 例 如 ,输入 一 个 在 数据 库 中 并 不 存在 的 数据 库 mytt, 观 察 并 记录 运行 结果 。 
又 如 输入 错误 的 用 户 名 userl ,观察 并 记录 运行 结果 ,并 解释 原因 。 
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图 11-4 数据 库 成 功 连接 


11.3. 实验 11.2 数据 库 查 询 
实验 目的 : 


(1) 掌握 JDBC 的 基本 结构 和 主要 接口 使 用 方法 。 
(2) 学 会 在 JSP 中 使 用 JDBC 接口 。 
(3) 掌握 JSP 中 使 用 SQL 语言 查询 数据 库 的 方法 。 


实验 内 容 : 


本 次 实验 训练 读者 掌握 JSP 数据 库 的 查询 技术 ,涉及 JDBC 中 的 相关 接口 和 SQL 语 
。 本 次 实验 编写 一 个 数据 读 取 的 JSP 文件 , 读 取 数据 库 中 表格 的 格式 和 数据 。 实 验 由 3 
个 练习 构成 。 
(1) 查询 数据 库 中 表格 的 格式 ,将 表格 的 字段 列表 显示 。 


(2) 查询 数据 库 中 的 表格 ,将 表格 数据 列表 显示 。 
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Zl 


(3) 利用 后 台 JavaBean 实现 数据 库 的 查询 。 


实验 步骤 : 


练习 1: 查询 数据 库 中 表格 的 格式 ,将 表格 的 字段 列表 显示 。 

(1) 本 次 实验 需要 后 台数 据 库 的 支持 ,安装 并 调试 好 数据 库 系 统 , 实 验 中 使 用 SQL 
Server 2005 作为 数据 库 环境 。 下 载 SQL Server 2005 的 JDBC 驱动 sqlidbe. jar, 并 复制 到 
Tomcat 服务 器 的 lib 目录 或 者 具体 Web 应 用 程序 的 WEB-INF/lib 目录 中 。 

(2) 打开 SQL Server 2005 的 客户 端 管理 工具 SQL Server Management Studio ,登录 后 
如 图 11-5 所 示 。 


E,Wicrosoft SQL Server Management Studio 


WANGWEILI (SQL Server 9.0.1399 - 


YANGIEILI TN 


a Ir] AdventureWorks. 
m 国 AiventurefforksD? 
a [T] aspbook 
gi (gy DBclass 
m (D MySampletest 

a m 安全 性 

gm C3 服务 器 对 象 

d Ca 复制 Cl Noti fi cation Services 


[1715 
国 国 Woti fi cation Services Boe sere KECRARA 10) 


EB SOL Server 代理 已 禁用 代理 xP) 


图 11-5 SQL Server Management Studio 


(3) 建立 数据 库 MySampleTest, 并 在 其 中 建立 两 个 表 “ 员 工 ” 和 “部 门 ”, 其 中 如 
图 11-6(a) 所 示 员 工 表 的 “所 属 部 门 编号 ”数据 是 外 键 参考 了 部 门 表 11-6(b) 中 的 “部 门 
编号 ”属性 ,如 图 11-6 所 示 。 并 在 表 中 插入 测试 用 数据 。 


R- dbo. 员工 | RE) 
E | BERE RS | 

加 int [a] 

员工 姓名 Nvarchar(20) B 
员工 职位 nvarchar(z0) VR — ae Bn) € - a BI IRE] 

员工 出 生日 其 detetime 3 | 数据 类 型 “| ng | 
|— BIN nverchar(2) Eg ri int 

员工 聘用 日 期 detetime 回 | SISR nwarchar(50) [ei 
BETES int E be] 
MR 口 

(a) 员工 表 (b) 部 门 表 


图 11-6 实验 用 测试 数据 库 和 表格 


注意 : 读者 也 可 以 根据 实际 情况 ,采用 其 他 数据 库 , 如 MySQL 以 及 相应 的 JDBC 驱动 
来 实现 下 列 的 实验 练习 。 
(4) 打开 JSP 开发 环境 ,新 建 JSP 文件 employeemetadate. jsp. 部 分 代码 见 程 序 清 
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单 11-2 ,该 文件 用 于 读 取 数 据 库 MySampleTest 中 “员工 ” 表 的 结构 。 请 仔细 阅读 程序 ,将 程 
序 清单 11-2 中 的 | 代码 1] ARE 4 处 填充 完整 ,实现 对 数据 库 “ 员 工 表 ”结构 的 显示 。 
程序 清单 11-2: 


<!--employeemetadate.jsp - -> 
<% 6 page contentType- "text/html; charset=gb2312" language- "java"$ > 
«$8 page import-"java.sql.* "> 
«html» 
<head> 
<title> bi T.#< /title» 
</head> 
<% 
try{ 
Class.forName ("com.microsoft.sqlserver.jdbc.SQLServerDriver") .newInstance () ; 
String url- "jdbc:sqlserver://localhost:1433;DatabaseName- MySampleTest"; 


Connection conn=| RFS 1| ; 
// 建 立 连 接 对 象 
Statement stmt=| 代 码 2|; 
// 建 立 查 询 对 象 

$> 

<body> 
员工 表 结 构 如 下 
<br> 


<table border- "1" cellspacing- "1"> 

<tr> 
<td> 字 段 名 称 < /td> 
<td> 类 型 < /td> 
<td> 列 宽 < /td> 

</tr> 

<% 
String sql="select * from 员工 "7 
Resultset rs=| {tig 3| ; 
// 执 行 查询 操作 
ResultSetMetaData meta- rs.getMetaData () ; 


for (int i=1;i<=meta.getColumnCount () i++) ( 


out.print ("<tr><td> "+meta.getColumnName (i)+ "< /td» ") ; 
out.print ("<td> "+meta.getColumnTypeName (i) + "< /td» "); 
out.print ("< td» "+meta.getPrecision (i)+"< /td>< /tr>"); 
H 
S> 
</table> 
< /body> 
<% 


rs.close(); 
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stmt.close(); 
conn.close(); 
)catch (| 代码 4)) ( 
// 捕 获 驱 动 程序 不 存在 的 异常 
out.print (cnfe) ; 


}catch (SQLException sqle) { 
out.print (sqle) ; 
}catch (Exception e) { 
out.print (e); 
} 
$> 
</html> 


(5) 修改 后 保存 employeemetadate. jsp 文件 ,启动 Tomcat 服务 器 ,测试 该 文件 是 否 能 
正确 读 取 “员工 ”表格 的 格式 ,使 之 运行 效果 如 图 11-7 所 示 。 
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员工 表 结构 如 下 
字段 名 称 RA pit 
员工 编号 int {lo 


员工 姓名 nvarchar [2o | 
员工 职位 | nvarchar|20 | 
员工 出 生日 期 ldatetime|23 
员工 人 性别。 Invarcharl2 — 
员工 聘用 日 期 datetime|23 
FER RS lint ho | 


图 11-7 “员工 ”表格 式 


练习 2: 查询 数据 库 中 的 表格 ,将 表格 数据 列表 显示 。 

(1) 建立 JSP 文件 employeeR.jsp, 用 于 实现 员工 信息 的 显示 。 由 于 员工 的 所 属 部 门 编 
号 需要 参考 部 门 表 , 所 以 在 程序 中 需要 用 到 连接 查询 的 SQL 语句 。employeeR. jsp 的 部 分 
代码 见 程序 清单 11-3 ,请 将 程序 清单 11-3 中 的 | 代码 1 一 | 代码 3| 补 充 完整 。 注 意 ; 在 连接 
数据 库 的 用 户 名 和 密码 要 与 数据 库 设置 保持 一 致 。 

程序 清单 11-3: 


<!--employeeR.jsp - -> 
<% @ page contentType- "text/html; charset=gb2312" language- "java"$ > 
«$6 page import-"java.sql.* "> 
<html> 
<head> 
<title> 员 工 表 < /title> 
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</head> 
<% 
tryt 
Class.forName ("com.microsoft.sqlserver.jdbc.SQLServerDriver") .newInstance () 7 
String url="jdbc:sqlserver: //localhost :1433; DatabaseName=MySampleTest"; 
Connection conn- DriverManager.getConnection (url, "userl", "passwl"); 
// 其 中 useri 为 用 户 名 ,passwl 为 密码 名 ,由 用 户 自行 设置 
Statement stmt= conn.createStatement () ; 
$> 
<body> 
员工 信息 如 下 
<br> 
«table border- "1" cellspacing- "1"> 
«tr» 
<td> 员 工 编号 < /td> 
<td> 员 工 姓 名 < /td> 
<td> 员 工 职 位 < /td> 
<td> 员 工 出 生日 期 < /td> 
<td> 员 工 性 别 < /td> 
<td> 部 门 名 称 < /td> 
</tr> 
<% 
String sql= "select 员工 编号 ,员工 姓名 ,员工 职位 ,员工 出 生日 期 ,员工 性 别 ,部 门 名 称 "; 
sql= sql+ "from 员工 left outer join 部 门 on (员工 .所 属 部 门 编号 = 部 门 .部 门 编号 ) "; 
ResultSet rs= stmt.| ffi 1); 
// 执 行 sql 查询 
while (rs!=null && [FRR 2) { 
// 依 次 输出 查询 结果 
out.print ("< tr» « td» "4 rs.getInt (1)+"< /td» ") ; 
out.print ("<td> "+ rs.getString (2)+ "< /td» ") 
out.print ("<td> "+ rs.getString (3) + "< /td>"); 
out.print ("«td» "+ rs. Rid 3| - "< /td>"); 


out.print ("<td> "+ rs.getString (5)+ "< /td» ") ; 
out.print ("<td> "+ rs.getString (6)+ "< /td» « /tr» ") ; 
} 
$$> 
</table> 
</body> 
«t 
rs.close(); 
stmt.close(); 
conn.close(); 
}catch (ClassNotFoundException cnfe) { 
out.print (cnfe) ; 
}catch (SQLException sqle) { 
out.print (sqle) ; 
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}catch (Exception e) ( 
out.print (e); 
} 
b> 
</html> 


(2) 保存 并 测试 employeeR. jsp ,检查 程序 是 否 返 回 了 员工 的 数据 ,如 图 11-8 所 示 。 
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图 11-8 “员工 > 表 数据 


练习 3: 利用 后 台 JavaBean 实现 数据 库 的 查询 。 

(1) 利用 后 台 JavaBean 实现 对 数据 表 的 查询 。 打 开 Java 开发 环境 ,新 建 Java 文件 
Employee. java ,在 该 类 中 实现 数据 库 的 连接 和 数据 的 查询 。 将 程序 清单 11-4 的 代码 输入 。 

程序 清单 11-4: 


//Employee.java 
import java.text. * ; 
import java.util.Date; 
import java.sql. * ; 
import java.io. * ; 


public class Employee ( 


public Connection getConnection() ( 

Connection conn- null; 

try { 
Class .forName ("com.microsoft .sqlserver .jdbc.SQLServerDriver") 

-newInstance () ; 

String url="jdbc:sqlserver://localhost :1433;DatabaseName=MySampleTest"; 
conn- DriverManager.getConnection (url, "userl", "passwl") ; 

) catch (Exception e) ( 

} 


return conn; 


* 189 « 


public ResultSet readEmployees() { 

try { 
Statement stmt=getConnection () .createStatement () ; 
String sql="select 员工 编号 ,员工 姓名 ,员工 职位 ,员工 出 生日 期 ,员工 性 别 , 部 门 名 称 "; 
Sql- sqL* "from fi T. left outer join 部 门 on( 员 工 . 所 属 部 门 编号 = 部 门 .部 门 编号 )"; 
ResultSet rs= stmt .executeQuery (sql); 
return rs; 

} catch (Exception e) { 

} 

return null; 


} 


(2) 新 建 JSP 文件 employeewithbean. jsp, 利 用 程序 清单 11-4 中 的 JavaBean 完成 员工 
表 数 据 的 读 取 , 将 程序 清单 11-5 中 的 代码 输入 。 
程序 清单 11-5: 


<!--employeewithbean.jsp --> 
«$6 page contentType- "text/html; charset=gb2312" language= "java"$ > 
«$6 page import="java.sql. * "$> 
€ jsp:useBean id= "employee" class= "chapterll.Employee" scope= "page"/> 
<html> 
<head> 
«title» hi T. X« /title> 
</head> 
<body> 
员工 信息 如 下 
<br> 
«table border- "1" cellspacing- "1"> 
«tr» 
«td» fi T Ai E « /td» 
<td> 员 工 姓名 < /td> 
<td> 员 工 职位 < /td> 
<td> 员 工 出 生日 期 </ta> 
<td> 员 工 性 别 < /td> 
<td> 部 门 名称 < /td> 
</tr> 
«t 
ResultSet rs- employee.readEmployees(); 
while (rs!-null && rs.next ())( 
out.print ("« tr» « td» "* rs.getInt (1) "« /td» ") ; 
out.print ("<td> "+ rs.getString (2)+"< /td» ") ; 
out.print ("< td» "+ rs.getString(3)-* "« /td» ") ; 
out.print ("<td> "+ rs.getDate (4) "< /td» ") ; 
out.print ("<td> "+ rs.getString(5)-* "< /td» ") ; 
out.print ("<td> "+ rs.getString (6)+ "< /td» « /tr»") ; 
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} 
a> 
</table> 
</body> 
<% 
rs.close(); 
$> 
</html> 


(3) 保存 并 调试 employeewithbean. jsp 程序 ,看 是 否 和 直接 用 JSP 脚本 实现 的 效果 
一 致 。 


11.4. 实验 11.3 数据 库 更 新 


实验 目的 : 


(1) 掌握 JDBC 的 基本 结构 和 主要 接口 使 用 方法 。 
(2) 学 会 在 JSP 中 使 用 JDBC 接口 。 
(3) 掌握 JSP 中 使 用 SQL 语言 更 新 数据 库 的 方法 。 


实验 内 容 : 


本 次 实验 训练 读者 掌握 JSP 数据 库 的 更 新 技术 。 数 据 库 的 更 新 主要 有 插 和 人 人、 修改 和 删 
除 操作 ,涉及 到 SQL 语言 中 的 insert, update 和 delete 操作 。 本 次 实验 编写 一 个 数据 更 新 
程序 ,还 是 用 到 实验 11.2 中 的 数据 库 , 实 现 对 员工 数据 的 更 新 。 
实验 步骤 : 

本 次 实验 的 具体 要 求 如 下 : 修改 实验 11. 2 中 程序 清单 11-3 的 employeeR. jsp, 并 保存 
为 新 的 JSP 文件 employeeRW.jsp, 加 入 新 建 一 个 员工 、 修 改 和 删除 员工 的 链接 。 新 建 员 工 
和 修改 员工 都 是 利用 一 个 表单 来 实现 的 ,链接 到 employeeform. jsp ,依靠 action 参数 来 区 分 
这 两 个 操作 。 如 果 action 参数 的 值 为 new, 则 表示 为 “新 建 一 个 员工 ”; 如 果 action 参数 的 值 
为 edit, 表 示 ”* 修 改 员工 信息 ”。 删 除 员 工 从 表单 ,直接 链接 到 employeedelete. jsp 即 可 。 

CD 请 仔细 阅读 程序 清单 11-6 ,将 程序 employeeRW. jsp 中 的 | 代码 了 一 | 代码 3 引 补充 
完整 ,实现 实验 练习 的 要 求 , 运 行 结果 如 图 11-9. 

程序 清单 11-6: 


<!--employeeRW.jsp --> 
<%@page contentType- "text/html; charset=gb2312" language- "java"$ > 
«$8 page import-"java.sql.* "$5 
<html> 
<head> 
<title> 员 工 表 < /title> 
</head> 
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<% 
tryt 
Class.forName ("com.microsoft .sqlserver .jdbc.SQLServerDriver") .newInstance () ; 
String url="jdbc:sqlserver://localhost :1433;DatabaseName=MySampleTest"; 
Connection conn- DriverManager .getConnection (url, "userl", "passwl") ; 
Statement stmt=conn.createStatement () ; 
$> 


<body> 

员工 信息 如 下 
代码 1 
<!-- 新 建 员 工 链 接 --> 


<br> 


«table border- "1" cellspacing- "1"> 
«tr» 
<td> 员 工 编 号 < /td> 
<td> 员 工 姓名 < /td> 
<td> bi T « /td> 
<td> 员 工 出 生日 期 < /td> 
<td> 员 工 性 别 < /td> 
<td> 部 门 名 称 < /td> 
</tr> 
<% 
String sql="select 员工 编号 ,员工 姓名 ,员工 职位 ,员工 出 生日 期 ,员工 性 别 ,部 门 名 称 " 
Sql- sql+ "from 员工 left outer join 部 门 on (员工 .所 属 部 门 编号 = 部 门 .部 门 编号 )"; 
ResultSet rs= stmt.executeQuery (sql) ; 
while (rs!=null && rs.next()) { 
out.print ("<tr><td> "4 rs.getInt (1)+"< /td» ") ; 
out.print ("<td> "+ rs.getString (2)+ "< /td» ") 
out.print ("< td» "+ rs.getString (3)+ "< /td» ") ; 
out.print ("<td> "+ rs.getDate (4) 4 "< /td» ") ; 
out.print ("<td> "+ rs.getString (5)+ "< /td» ") 
out.print ("<td> "+ rs.getString (6)+ "< /td» ") ; 
out.print ("<td>"); 
Ki 2); 
// 修 改 链接 
out.println("«/td»"); 
out.print ("<td>"); 
代码 3|; 


// 删 除 链接 
out.println("«/td»"); 


H 
$2 
« /table» 
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; 


< /body> 

<% 
rs.close(); 
stmt.close(); 
conn.close(); 

}catch (ClassNotFoundException cnfe) { 

out.print (cnfe) ; 

}catch (SQLException sqle) { 
out.print (sqle) ; 

}catch (Exception e) { 
out.print (e) ; 

) 

$> 

</html> 


JAL - Nicrosoft Internet Explorer 
Re) REO EEV KÆRA IAW Aaa 


Q»- O- DAG Axe roms ©| DB- aa le 


A] http: //Localhost :8080/JspLabBook/chi1/enployeeRY. jsp 


员工 信息 如 下 | 新 建 一 个 员工 | 下 载 数据 


员工 编号 | 员工 姓名 | 员工 职位 | 员工 出 生日 期 | 员工 性 别 部 门 名 称 
工程 师 1973-01-01 | 更 [计算 机 修改 
技术 员 [1980-02-11 [& 设计 部 [EA] 
经 理 [1965-01-01 X 工程 部 [修改 ] 
经 理 。 1956-08-00 | 男 | 人 力 资源 部 | [修改 ] 


图 11-9 可 更 新 “员工 ” 表 数 据 


(2) 新 建 JSP 文件 employeeform. jsp。 这 个 文件 用 于 接收 新 建 员 工 数据 或 修改 的 员工 
数据 ,通过 加 入 HTML 表单 来 实现 ,将 程序 清单 11-7 的 代码 输入 : 
程序 清单 11-7: 


<!--employeeform.jsp --> 
< % @ page contentType- "text/html; charset=gb2312" language- "java"$ > 
«$6 page import="java.sql. * "$5 
<html> 
<head> 
<title> 员 工 管理 < /title» 
< /head> 
<% 
Class.forName ("com.microsoft .sqlserver .jdbc.SQLServerDriver") .newInstance () ; 
String url="jdbc:sqlserver: //localhost : 1433; DatabaseName=MySampleTest"; 
Connection conn= DriverManager.getConnection (url, "userl", "userl"); 
Statement stmt- conn.createStatement () ; 
ResultSet rs= stmt.executeQuery ("select * from 员工 中) 


String action= request .getParameter ("action"); 
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String actiontype=""; 


String actionaime ""; 


String editemployeeid- ""; 


if (action.equals ("new") ) { 


actiontype- "新 建 一 个 员工 " 
actionaim- "employeeadd.jsp"; 


jelse{ 


} 
5» 


actiontype- "修改 员工 信 
actionaim= "employeeedit.jsp"; 

editemployeeid- request .getParameter ("id"); 

rs= stmt.executeQuery ("select * from 员工 where 5i T 5j 5 ="+ editemployeeid); 


if(rs!-null)rs.next(); 


a"; 


<body> 
<%=actiontype% > 
<hr> 


< form action="< %$=actionaimė >" method= "post"> 
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«table border= "0" cellspacing- "0"> 


«tr» 
<td> 员 工 编号 : </td> 
«td» 
<% 
if (action.equals ("new") ) 
out.print ("< input type=\"text\" size=\"10\" name= \"empNo\">") ; 
else 
out.print ("< input type=\"text\" size=\"10\" name= \"empNo\" readonly- true 
value- "«rs.getInt ("员工 编号 ")+">"); 


$> 
«/td» 
</tr> 
«tr» 
<td> 员 工 姓名 : «/ta» 
«td» 
<% 
if(action.equals ("new") ) 
out.print ("< input type=\"text\" size=\"20\" name= V'empName V"? ") ; 
else 
out.print ("< input type- V'textV" size- V'20V" name= \"empName\" value- \""+ 
rs.getString ("员工 姓名 ")+"\" >"); 
b> 
«/td» 
«/tr» 
«tr» 
«td» R TB: < /td> 


«td» 
<% 
if (action.equals ("new") ) 
out.print ("< input type=\"text\" size=\"20\" name= \"empJob\">") ; 
else 
out.print ("<input type=\"text\" size=\"20\" name= \"empJob\" value= \""+ 
rs.getString ("员工 职位 ")+"\" >"); 
5> 
</td> 
</tr> 
«tr» 
<td> 员 工 出 生日 期 :< /td> 
«td» 
<% 
if (action.equals ("new") ) 
out.print ("< input type= V'textV" size=\"20\" name= \"empBir\">"); 
else 
out.print ("< input type= V'textV" size- V'20V" name= \"empBir\" value= \""+ 
rs.getDate ("hi T.H Æ H jp") « "V" >"); 
$> 
</td> 
</tr> 
«tr 
«td» bi T. TESI :< /td> 
«td» 
<select name= "empSex"» 
<% 
if (action.equals ("edit") &&rs.getString ("5i TYE SI") equals ("4 ")) ( 
out.print ("<option value= 'Jj '» 9] « /option»"); 
out.print ("<option value= ' 女 ' selected» & « /option»"); 
Jelse( 
out.print ("<option value= 'Jj ' selected» Jj « /option»"); 
out.print ("<option value= ' 女 ' > 女 < /option>"); 
) 
$> 
</select> 
</td> 
</tr> 
<tr> 
<td> 所 属 部 门 : </td> 
«td» 
<select name= "empDepart"> 
«t 
int departno- 0; 
if (action.equals ("edit")) 


* 195 * 


departno-rs.getInt ("所 属 部 门 编号 "); 
ResultSet temprs- stmt.executeQuery ("select * from 部 门 "); 
while (temprs! -null && temprs.next ()) { 
out.print ("<option value- V"" temprs .getInt ("部 门 编号 ")+"\""); 
if(action.equals ("edit") && departno==temprs.get Int ("部 门 编号 ")) 
out.print ("selected"); 
out.print (">"+temprs.getString ("部 门 名 称 ")+"< /option»"); 
} 
temprs.close(); 
$> 
</select> 
</td> 
</tr> 
</table> 
«input type="submit" value= "f 4c "> 
</form> 
</body> 
<% 
rs.close(); 
stmt.close(); 
conn.close(); 
$> 
</html> 


(3) 在 本 次 实验 中 利用 后 台 JavaBean 来 实现 数据 的 插入 、 修 改 和 删除 ,所 以 修改 程序 
清单 11-4 中 的 Employee. java 代码 ,加 入 实现 代码 。 为 了 方便 ,将 程序 清单 11-7 中 
employeeform. jsp 的 表单 在 Employee. java 中 加 入 每 个 输入 对 应 的 参数 和 get-set 方法 。 
将 Employee. java 修改 为 程序 清单 11-8 中 代码 所 示 。 

程序 清单 11-8: 


//Employee.java 
import java.text. * ; 
import java.util.Date; 
import java.sql.* ; 
import java.io.* ; 


public class Employee ( 
private int empNo; 
private String empName; 
private String empJob; 
private String empBir; 
private String empSex; 
private int empDepart; 


public int getEmpNo() { 
* 196 * 


// 获 取 编 号 
return empNo; 


public void setEmpNo (int empNo) { 
// 设 置 编号 

this.empNo- empNo; 

) 


public String getEmpName() ( 
// 获 取 姓 名 


return empName; 


public void setEmpName (String empName) ( 
// 设 置 姓名 
this.empName- empName; 


public String getEmpJob() { 
// 获 取 工 作 性 质 
return empJob; 


public void setEmpJob (String empJob) ( 
// 设 置 工作 性 质 
this.empJob- empJob; 


public String getEmpBir() { 
// 获 取出 生日 期 


return empBir; 


public void setEmpBir (String empBir) ( 
// 设 置 出 生日 期 
this.empBir= empBir; 


public String getEmpSex() { 
// 获 取 性 别 


return empSex; 


public void setEmpSex (String empSex) { 
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// 设 置 性 别 
this.empSex- empSex; 


public int getEmpDepart() { 
// 获 取 部 门 
return empDepart; 


public void setEmpDepart (int empDepart) { 
// 设 置 部 门 
this.empDepart- empDepart; 


public String trans (String origin) ( 
// 中 文字 符 处 理 

String result- null; 

try ( 
byte[] temp=origin.getBytes ("iso- 8859- 1"); 
result=new String (temp, "gb2312"); 

) catch (UnsupportedEncodingException usee) ( 

) 

return result; 


public Connection getConnection() ( 
// 省 略 , 见 程序 清单 11- 4 


public ResultSet readEmployees() { 
// 省 略 , 见 程序 清单 11-4 


public void insert() ( 
// 插 入 记录 处 理 
try { 
String sql="insert into fi T. " 
sql=sql+" (员工 编号 ,员工 姓名 ,员工 职位 ,员工 出 生日 期 ,员工 性 别 , 所 属 部 门 编号 ) "; 
sql=sql+ "values (?,?,2?,2,2,2)"% 
PreparedStatement pstmt- getConnection () .prepareStatement (sql) ; 
pstmt.setInt (1, Integer.valueOf (empNo) .intValue()); 
pstmt.setString(2, trans (empName)); 
pstmt.setString(3, trans (empJob)); 
SimpleDateFormat dd- new SimpleDateFormat ("yyyy- MM- dd") ; 
Date date- dd.parse (empBir); 
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pstmt.setDate (4, new java.sql.Date (date.getTime())); 
pstmt.setString(5, trans (empSex)); 
pstmt.setInt (6, empDepart); 
pstmt.executeUpdate () ; 
) catch (Exception e) ( 
) 


public void update() { 
// 修 改 记录 

try ( 

String sql- "update 员工 "; 

sql=sql+ "set 员 工 姓 名 =?, 员 工 职位 =?, 员 工 出 生日 期 =?, 员 工 性 别 =?, 所 属 部 门 编号 =?"7 
sql= sql+ "where 员工 编号 = "+ empNo; 
PreparedStatement pstmt= getConnection () .prepareStatement (sql) ; 
pstmt.setString(1, trans (empName)); 
pstmt.setString(2, trans (empJob)); 
SimpleDateFormat dd- new SimpleDateFormat ("yyyy- MM- dd") ; 
Date date- dd.parse (empBir); 
pstmt.setDate (3, new java.sql.Date (date.getTime ())); 
pstmt.setString(4, trans (empSex)); 
pstmt.setInt (5, empDepart) ; 
pstmt .executeUpdate () ; 

) catch (Exception e) ( 

) 


public void delete (String empno) ( 
// 删 除 记 录 
try ( 
String sql- "delete from 员工 where 员工 编号 ="+empno; 
Statement stmt- getConnection () .createStatement () ; 
stmt.executeUpdate (sql) ; 
) catch (Exception e) { 
) 


) 


(4) 如 程序 清单 11-6 中 代码 employeeRW. jsp 所 示 , 员 工 新 建功 能 发 送 到 
employeeadd. jsp 处 理 ,员工 修改 功能 发 送 到 employeeedit. jsp 处 理 , 员 工 删 除 发 送 到 
employeedelete. jsp 处 理 。 请 仔细 阅读 下 列 的 程序 ,将 程序 清单 11-9 — 11-11 中 的 
(RAG Be 1 | ~| ARS Be 3 上 补 充 完 整 。 

程序 清单 11-9: 


<%--employeeadd.jsp --%> 
«jsp:useBean id= "employee" class= "chapterll.Employee" scope- "page"> 
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«jsp:setProperty name- "employee" property-" * "/> 
< /jsp:useBean» 


«t 


RISE 1; 


// 插 入 记录 
response.sendRedirect ("employeeRW.jsp"); 


$> 
程序 清单 11-10: 


<% --employeeedit.jsp --% > 
<% 


代码 段 ?| ; 


// 修 改 记录 
response.sendRedi rect ("employeeRW. jsp"); 
$> 


程序 清单 11-11: 


<%- - employeedelete.jsp- -*» 
« jsp:useBean id- "employee" class- "chapterll.Employee" scope= "page"/> 
<$% 
String id= request.getParameter ("id"); 

代码 段 3|; 
// 删 除 指定 编号 的 记录 
response.sendRedi rect ("employeeRW.jsp"); 
$> 


(5) 保存 以 上 程序 ,在 Tomcat 服务 器 中 运行 和 测试 ,保证 程序 能 够 正确 地 处 理 数据 库 
中 的 数据 。 运 行 效果 如 图 11-10 所 示 。 


Aq) 编辑 E) SEV KEA 文件 @) REO SEW tia) 


RIRS: a 1 
员工 姓名 ， : (Em 

员工 职位 ， rmm 
员工 出 生日 期 : 期 : [1973-01-01 
员工 性 别 : TERI: aw 
ex 门 ， pA B 


Sp Eih Intranet 


(b) 修改 员工 信息 
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11.5 实验 11.4 导出 数据 库 数据 到 本 地 文件 


实验 目的 : 


(1) 掌握 JDBC 的 基本 结构 和 主要 接口 使 用 方法 。 
(2) 学 会 在 JSP 中 数据 库 操作 。 


实验 内 容 : 


本 次 实验 训练 读者 掌握 JSP 访问 数据 库 的 使 用 技术 。 在 实际 的 开发 中 往往 需要 将 一 
些 数据 整理 成 报表 ,而 Excel 是 Office 家 族 中 常用 的 电子 表格 软件 , 故 在 ISP 开发 中 经 常会 
把 数据 库 中 的 数据 导出 到 本 地 的 Excel 文件 。 本 次 实验 编写 数据 Excel 导出 程序 。 


实验 步骤 : 


C1) 修改 实验 11. 3 中 程序 清单 11-4 的 employeeRW.jsp, 在 代码 中 加 入 一 个 链接 用 来 
启动 Excel 文件 导出 的 JSP 代码 ,代码 如 下 所 示 : 


«a href- "download.jsp"> 下 载 数据 < /a> 


(2) 新 建 download. jsp ,将 普通 的 数据 文件 在 网 页 中 显示 ,修改 自动 启动 文件 下 载 到 本 
地 。 将 程序 清单 11-12 代码 输入 。 
程序 清单 11-12 


<!--download.jsp--> 
« $ 6 page contentType- "application/msexcel; charset=gb2312" language="java"% > 
«$6 age import="java.sql. * "$> 
«html» «head» 
«title» bi T. X« /title» 
< /head» 
<% 
tryt 
Class.forName ("com.microsoft.sqlserver.jdbc.SQLServerDriver") .newInstance () ; 
String url= "jdbc:sqlserver://localhost :1433;DatabaseName=MySampleTest"; 
Connection conn- DriverManager .getConnection (url, "userl", "user1") ; 
Statement stmt=conn.createStatement () ; 
$> 
<body> 
«table border- "1" cellspacing- "1"> 
«tr» 
<td> 员 工 编 号 < /td> 
<to> 员 工 姓名 < /ta> 
«td» fi T BL « /td> 
<tq> 员 工 出 生日 期 </td> 
<td> Fi TES < /td> 
<tq> 部 门 名 称 < /td> 
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mk 
<% 
String sql="select 员工 编号 ,员工 姓名 ,员工 职位 ,员工 出 生日 期 ,员工 性 别 ,部 门 名 称 m; 
sql=sql+ "from 员工 left outer join 部 门 on (员工 .所 属 部 门 编号 = 部 门 .部 门 编号 )"; 
ResultSet rs- stmt.executeQuery (sql); 
while (rs!-null && rs.next()) { 
out.print ("« tr» « td» "4 rs.getInt (1)+"< /td» ") ; 
out.print ("<td> "+ rs.getString (2)+ "< /td» ") ; 
out.print ("<td> "+ rs.getString (3) * "< /td» ") ; 
out.print ("<td> "+ rs.getDate (4) * "< /td» ") ; 
out.print ("<td> "+ rs.getString (5)+ "< /td» ") ; 
out.print ("<td> "+ rs.getString (6) * "< /td» « /tr» ") ; 
} 
$» 
</table> 
</body> 
<% 
rs.close(); 
stmt.close(); 
conn.close(); 
}catch (ClassNotFoundException cnfe) { 
out.print (cnfe) ; 
}catch (SQLException sqle) { 
out.print (sqle) ; 
}catch (Exception e) { 
out.print (e); 
} 
$> 
<% 
response.setHeader ("Content- disposition", "attachment; filename=data.xls"); 
$> 
</html> 


(3) 保存 文件 ,启动 服务 器 测试 ,得 到 如 图 11-11 运行 效果 。 


EIU RE - Microsoft Internet Explorer 
wO RG) FEW 收藏 和 TAG 


Ox-O- HAG ^» 


Hit W (Æ) http: //Localhost :8080/JspLabBook/ch1 1, 


员工 信息 如 下 | 新 建 一 个 员工 


| 员工 编号 员工 姓名 | 员工 职位 


cam. GEO) Cao) CE 


FRI [ 
k= É 来 自 Internet Bh » pn 

su Q9 aR SATEEN” INERT 
图 11-11 数据 导出 Excel 文件 
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#128 JSP 的 JavaBean 编程 


JavaBean 是 Sun Microsystems 公司 于 1997 年 发 布 的 一 种 可 重用 的 组 件 。JavaBean 往往 
与 JSP 结合 使 用 ,已 经 成 为 JSP 两 大 MVC 开发 模式 之 一 。JavaBean 的 出 现 ,进一步 实现 Java 
代码 与 网 页 的 数据 的 分 离 , 提 高 了 ISP 文件 的 可 维护 性 ,降低 了 开发 人 员 对 应 用 Java 语言 的 
要 求 。 为 此 ,本 章 简略 介绍 了 JavaBean 编程 的 要 点 以 及 设计 与 JavaBean 编程 相关 的 实验 。 


12.1 预备 知识 


JavaBean 用 Java 语言 编写 的 可 重用 的 软件 组 件 。 这 种 软件 组 件 实质 上 就 是 Java 公共 
类 ,只 是 这 种 公共 类 特殊 在 于 只 有 一 个 不 带 参数 的 默认 构造 方法 ,并 预先 定义 了 特定 的 属性 
和 方法 ,通常 有 setXXX() 和 getXXX() 方 法 实现 对 特定 属性 的 设置 和 获取 。jJavaBean 不 但 
编写 简单 ,容易 学 习 , 而 且 可 根据 用 户 的 需要 实现 多 种 复杂 的 业务 逻辑 。 从 这 个 角度 上 来 
说 ,有 必要 对 JavaBean 做 一 个 了 解 。 下 面 将 从 JavaBean 的 属性 .JavaBean 的 应 用 以 及 
JavaBean 的 作用 域 3 个 方面 ,对 JavaBean 做 一 个 介绍 。 


12.1.1 JavaBean 的 属性 


JavaBean 的 属性 体现 了 JavaBean 的 内 部 特征 ,是 JavaBean 内 部 状况 的 抽象 表示 。 依 
据 应 用 中 的 不 同 要 求 ,以 及 Sun Systems 公司 提供 的 JavaBean 技术 规范 ,可 以 将 JavaBean 
的 属性 分 成 4 种 类 型 : 简单 类 型 .索引 类 型 . 绑 定 类 型 和 约束 类 型 ,具体 内 容 见 表 12-1。 


表 12-1 JavaBean 的 属性 


类 型 形 式 说 明 
void set< Property» (PropertyType value) 
// 设 置 属 性 
aa 针对 单 值 属性 而 言 ,是 通过 
简单 类 型 或 JavaBean 的 相关 方法 的 调用 实 
现 对 JavaBean 属性 的 访问 
void set« Property» (boolean value) 
// 设 置 布 尔 类 型 的 属性 


boolean is< Property> () // 获 取 判 断 

void set« Property» (int index,<PropertyIype>value) ; 
// 索 引 设置 

void set< Property» (< PropertyType[]» value); 
// 设 置 属性 的 一 组 值 

void PropertyType get« Property» (int index); 

// 索 引 获取 ; 

void PropertyType[] get< Property» (); 

// 获 取 属 性 的 一 组 值 


针对 属性 对 应 指定 范围 的 一 组 
值 。 要 访问 属性 中 一 组 值 的 一 
个 必须 通过 索引 实现 


索引 类 型 
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续 表 


类 型 形 式 说 明 

public 
void a 
addPropertyChangeListener (PropertyChangeListener x); : ved Edi " : 

绑 定 类 型 MTS PropertyChange 事件 通知 所 
ES 有 相关 的 监视 器 ,然后 进行 
void 处 理 
removePropertyChangeListener (PropertyChangeListener x); 
// 移 除 属 性 变化 监听 者 
PropertyType get« Property» (); // 获 取 属 性 
void set< Property» (PropertyType value) throws 
PropertyVetoException; 
// 设 置 属性 ,属性 改变 抛 出 约束 属性 异 党 ——— 
dires 约束 。 这 种 约束 由 监听 器 来 

约束 类 型 ; 决定 是 否 要 求 否决 属性 发 生 
ee Ce oe x); 的 任何 一 个 变化 ,强迫 返回 
// 增 加 约束 监听 者 原来 的 设置 
public 
void 
removeVetoableChangeListener (VetoableChangelistener x); 
// 移 除 约束 监听 者 

一 般 ,JSP 多 使 用 具有 简单 类 型 和 索引 属性 的 JavaBean 组 件 。 约 束 类 型 和 绑 定 类 型 多 
用 在 GUI 图 形 组 件 中 。 


12.1.2 JavaBean 的 访问 


定义 一 个 JavaBean 组 件 的 最 终 目的 是 应 用 它 。 要 实现 访问 JavaBean 组 件 需 要 在 JSP 
文件 中 依照 下 列 步 又 来 实现 。 

1, 导入 JavaBean 的 类 

在 JSP 文件 中 ,通过 指令 page KFA JavaBean 的 类 。 具 体形 式 如 下 : 


<%@page import- "5 4 "> 


2. 创建 一 个 JavaBean 实例 对 象 
导入 成 功 后 ,在 JSP 文件 中 通过 过 jsp:useBean 之 创建 一 个 指定 作用 域 的 JavaBean 的 
实例 对 象 。 具 体形 式 如 下 : 


€ jsp:useBean id- "XJ $1 44 " scope- "作用 域名 " class=" 类 名 "| type= "类 型 名 "|beanName= "bean 的 
名 字 "> 


</jsp:useBean> 


其 中 : 
(D id: 定义 对 象 实例 名 。 
@ scope: 说 明 JavaBean 的 作用 域 。 
@ class: 说 明 JavaBean 的 类 名 ,可 以 单独 使 用 ,也 可 以 和 type 结合 使 用 。 
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CD type: 说 明 JavaBean 的 类 型 ,可 以 单独 使 用 ,也 可 以 与 class 或 beanName 结合 
使 用 。 

© beanName; 说 明 bean 的 名 字 , 只 能 与 type 结合 使 用 。 

3. 使 用 JavaBean 实例 对 象 的 属性 

使 用 JavaBean 实例 对 象 的 属性 有 两 种 情况 : 设置 属性 和 获取 属性 值 。JSP 为 此 分 别提 
f Y <jsp:setProperty> zl fF fll —jsp:getProperty > VE KK M Jes PEAY Jo FH] o 

(1) <jsp:setProperty>. 

<jsp:setProperty> 3j E N48 JavaBean 对 象 设置 属性 值 ,表示 形式 如 下 : 


«jsp:setProperty name- "bean 的 名 字 " property="* | 属性 名 " 
[param- "参数 名 站 
[value= " 值 "] 


> 


其 中 : 

(D name: 必 选 项 ,指定 JavaBean 实例 对 象 的 名 字 。 

@ property: 必 选 项 ,说 明 设置 的 属性 。 如 果 为 * ,表示 设置 或 修改 所 有 的 属性 ; 如果 
为 属性 名 , 则 设置 或 修改 指定 属性 。 

@ param; 可 选项 ,表示 用 户 请 求 的 参数 ,与 Web 表单 内 容 一 致 。 它 必须 与 property 
结合 使 用 。 

@ value; 可 选项 ,表示 属性 值 。 取 值 可 以 是 字符 串 也 可 以 是 表达 式 形式 。value 必须 
与 property 结合 使 用 。 

(2) <jsp:getProperty>, 

志 jsp:getProperty 过 动作 可 以 获取 JavaBean 实例 对 象 的 属性 值 ,形式 如 下 : 


« jsp:getProperty name= "bean 的 名 字 " property- "属性 "> 
其 中 ， 

(D name: 指定 JavaBean 实例 对 象 的 名 字 。 

© property: 指定 要 获取 对 象 属性 的 名 字 。 
12.1.3 JavaBean 的 作用 域 


在 动作 二 jsp: useBean 之 中 可 以 用 scope 属性 设置 JavaBean 组 件 的 作用 域 ,指定 
JavaBean 对 象 的 应 用 范围 。JavaBean 具有 4 fb EH BE: page, request, session 和 
application ,具体 说 明 见 表 12-2. 


表 12-2 JavaBean 的 作用 域 


作用 域 说 明 
page 表示 创建 的 Bean 对 象 只 在 当前 ISP 页 面 有 效 
request 表示 创建 的 Bean 对 象 只 在 本 次 请 求 有 效 , 具 体 作 用 在 当前 JSP 页 


ili. 以 及 JSP 页 面 中 用 二 %@ include% 放 指令 包含 的 页 面 以 及 用 
<jsp:forward> zl VE 44 [8] AY 9t rj 


session 表示 在 用 户 与 服务 器 交互 的 会 话 过 程 中 有 效 
application 表示 在 整个 Web 应 用 中 有 效 


* 205 * 


12.2 实验 12.1 JSP 使 用 JavaBean 


实验 目的 : 


(1) 了 解 JavaBean 的 基本 概念 。 

(2) 了 解 和 熟练 掌握 JavaBean 开发 的 基本 步骤 和 关键 语法 。 

G) 了 解 和 熟练 掌握 JavaBean 的 作用 域 的 不 同 作用 范围 ,并 结合 实际 应 用 。 
(4) 熟练 和 灵活 运用 JavaBean 属性 类 型 的 不 同 ,来 解决 实际 问题 。 


实验 内 容 : 


设计 一 个 用 Windows Media Player 播放 MP3 音乐 的 程序 。 为 《River Dance) 音 乐 专辑 
的 18 fi MP3 音乐 设计 播放 程序 。 利 用 JavaBean 来 保存 用 户 选择 的 音乐 。 该 实验 由 3 个 
练习 构成 。 

CD 利用 JavaBean 的 简单 属性 类 别 ,实现 用 户 选 择 的 单个 音乐 文件 的 播放 。 

(2) 修改 JavaBean 的 作用 域 ,比较 在 不 同 作用 域 的 应 用 。 

(3) 利用 JavaBean 的 索引 属性 ,实现 用 户 选 择 的 多 个 音乐 文件 连续 播放 。 


实验 步骤 : 


本 次 实验 是 帮助 读者 了 解 JavaBean 的 属性 的 简单 类 型 和 索引 类 型 的 应 用 。 本 次 实验 
的 内 容 是 设计 一 个 音乐 播放 程序 ,实现 用 户 可 以 用 Windows Media Player 播放 《 River 
Dance) 音 乐 专辑 的 18 首 MP3 音乐 文件 。 

练习 1: 用 简单 属性 JavaBean 实现 单 首 音 乐 文件 播放 。 

已 提供 3 个 文件 MusicBean. java, music. jsp 和 playMusic. jsp ,对 应 的 代码 分 别 见 程序 
清单 12-1 一 12-3。 其 中 ,MusicBean. java 是 保存 用 户 选择 的 音乐 文件 名 的 JavaBean 程序 ; 
music. jsp 是 显示 《River Dance》 音 乐 专辑 的 18 首 MP3 音乐 列表 ,让 用 户 根据 列表 进行 选 
择 ;playMusic. jsp 是 提供 实现 播放 用 户 选 择 的 单 首 音乐 文件 的 部 分 代码 。 请 修改 程序 
清单 12-3 ,使 之 运行 结果 能 如 图 12-1 和 图 12-2 所 示 。 

程序 清单 12-1: 


//MusicBean.java 
package beans; 
public class MusicBean ( 
private String name; 
public String getName () { // 获 取 音 乐 文件 名 
return name+ ".mp3"; 
} 
public String getTitle() { // 获 取 音 乐 标题 
inti; 
String title-""; 
tryt 
i-Integer.parseInt (name); 
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图 12-2 播放 音 


}catch (Exception e) { 
i-1; 
} 
switch (i) { 
case 1:title="Reel Around The Sun";break; 
case 2:title="The Heart's Cry";break; 


case 3:title="The Countess Cathleen/Women Of The Sidhe";break; 
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case 4:title="Caoineadh Cu Chulainn (Lament)";break; 
case 5:title- "Shivna";break; 
case 6:title- "Firedance";break; 
case 7:title- "At The Edge Of The World";break; 
case 8:title- "Slip Into The World";break; 
case 9:title- "Riverdance";break; 
case 10:title- "American Wake (The Nova Scotia Set) ";break; 
case 11:title="Lift The Wing";break; 
case 12:title="Amanzi";break; 
case 13:title="I Will Set You Free";break; 
case 14:title="Let Freedom Ring";break; 
case 15:title- "Macedonian Morning";break; 
case 16:title- "Marta's Dance/The Russian Dervish";break; 
case 17:title- "Ri-Ra";break; 
case 18:title- "Endless Journey";break; 
) 
return title; 
) 
public void setName (String name) ( // 设 置 音乐 名 
this.name- name; 


) 
程序 清单 12-2: 


<!--music.jsp--> 

<%@page contentType- "text/html; charset=gb2312" language="java"% > 

« ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.w3.org/TR/xhtml1/DTD/xhtml1- transitional .dtd"> 

«html xmlns= "http: //www.w3.org/1999/xhtmL"> 

<head> 

«meta http- equiv- "Content- Type"content- "text/html; charset=gb2312" /> 
<title> 音 乐 盒 < /title> 

</head> 


<body> 
<p><h2>River Dance 大 河 之 舞 < /n2» « /p> 
< form method= "get" action= "playMusic.jsp"> 
<fieldset title- "ill H "> 
«input type="radio" name= "name" value- "1" 
ReelAround The Sun 
«/input»«br /> 
«input type="radio" name= "name" value="2"> The Heart's Cry< /input» «br 
«input type- "radio" name- "name" value- "3"> 
The Countess Cathleen/Women Of The Sidhe 
< /input> 
208 。 


/> 


«br /» 

«input type- "radio" name- "name" value- "4"> 
Caoineadh Cu Chulainn (Lament) 

«input» 

«br /» 

«input type- "radio" name- "name" value- "5"> 
Shivna 

< /input> 

<br /» 

<input type="radio" name="name" value= "6"> 
Firedance 

< /input» 

«br /» 

<input type="radio" name= "name" value- "7"> 
At The Edge Of The World 

< /input» 

«br /» 

«input type="radio" name="name" value- "8"> 
Slip Into The World 

< /input» 

«br /> 

«input type="radio" name= "name" value- "9"> 
Riverdance 

< /input> 

<br 4» 

«input type="radio" name="name" value= "10"> 
American Wake (The Nova Scotia Set) 

< /input> 

«br /» 

<input type="radio" name="name" value- "11"» 
Lift The Wings 

< /input> 

<br /> 

<input type="radio" name="name" value= "12"> 
Amanzi 

</input> 

<br /» 

<input type="radio" name= "name" value= "13"> 
I Will Set You Free 

«input» 
«br /» 

«input type- "radio" name- "name" value- "14"> 
Let Freedom Ring 

«input» 

«br /» 
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<input type="radio" name= "name" value= "15" 
Macedonian Morning 
< /input» 
«br /» 
«input type- "radio" name- "name" value- "16"> 
Marta's Dance/The Russian Dervish 
« /input» 
«br /» 
«input type="radio" name="name" value- "17"> 
Ri-Ra 
< /input» 
«br /» 
<input type="radio" name="name" value- "18"» 
Endless Journey 
< /input» 
«br /» 
« /fieldset» 
«input type- "submit" value- "播放 "/> 
</form> 
< /body> 
</html> 


程序 清单 12-3: 


<!--playMusic.jsp--> 
<%@page contentType- "text/html; charset-gb2312" language= "java" $» 


« ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

“http: //www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"» 

«html xmlns= "http: //www.w3.0rg/1999/xhtml"» 

«head» 

«meta http- equiv- "Content- Type" content- "text/html; charset- gb2312"/» 
<title> 播 放 音乐 < /title> 

< /head» 


<body> 

« jsp:useBean id= "musicBean" scope= "page" class= "beans .MusicBean"/> 

<% 

if (musicBean.getName () ! 2 nu11) { 

out.println("« embed src=media/"+musicBean.getName ()+" loop= false autostart- true name- bgm 
width= '460' height- '68'/»"); 

} 

S> 

< /body> 

</html> 


问题 : 如 果 将 程序 清单 12-3 中 的 倒数 第 4 行 代码 中 的 musicBean. getName ( ) 
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M —jsp:getProperty > RA . A Je 4 ERARA. 

练习 2: 了 解 JavaBean 的 作用 域 。 

已 知 有 一 个 MusicHistoryBean. java ,代码 见 程序 清单 12-4, 可 用 来 记录 播放 乐曲 的 历 
史记 录 。 修 改 上 述 的 playMusic. jsp, 代 码 见 程序 清单 12-5, 使 之 可 以 显示 已 播放 的 历史 记 
录 。 将 playMusic. jsp 的 第 17 行 语句 “过 jsp: useBean id="historyBean" scope= "page" class= 
"beans. MusicHistoryBean" />” p AY scope 属性 分 别 用 page. request, session 和 
application 替代 ,打开 不 同 浏览 器 窗口 ,依次 运行 不 同 作 用 域 的 程序 ,观察 运行 结果 ,并 解释 
运行 结果 不 同 的 原因 。 

程序 清单 12-4: 

//MusicHistoryBean.java 

package beans; 


public class MusicHistoryBean ( 
private String history; // 音 乐 历 史记 录 
public void setHistory (String history)( 
this.history-history; 
) 
public String getHistory () { 


return this.history; 


} 
程序 清单 12-5: 


<!-- 修 改 后 的 playMusic.jsp--> 
< % @ page contentType- "text/html; charset= gb2312" 
language- "java" 
import- "beans.* " 
$> 
< ! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. w3. org/TR/ 
xhtm11/DTD/xhtm11- transitional.dtd"> 
<html xmlns= "http: //www.w3.0rg/1999/xhtml"» 
<head> 
<meta http- equiv- "Content- Type" content= "text/html; charset- gb2312"/» 
<title> 播 放 音乐 < /title> 
</head> 


<body> 
«jsp:useBean id= "musicBean" scope= "page" class= "beans .MusicBean"> 
«jsp:setProperty name- "musici " property-" * "/> 
</jsp:useBean> 
«jsp:useBean id= "historyBean" scope- "session" class= "beans .MusicHistoryBean"/> 
<% 
String title=musicBean.getTitle (); // 正 在 播放 音乐 的 标题 
* 211 + 


if (title! -null)( 
out .println ("<h2>River Dance 2 < /h2><br/><h4>"+title+ "< /h4><br/>"); 
String historylist=historyBean.getHistory (); // 获 取 已 播放 音乐 的 历史 记录 

if (historylist==null) historylist=""; 

historylist+=musicBean.getTitle()+ "<br/>"; // 增 加 新 的 记录 
$» 

«jsp:setProperty name- "historyBean" property- "history" value- "« $-historylist$ >"/> 

<!-- 重 新 设置 历史 记录 --> 

<% 

if (musicBean.getName () ! 2 nu11) 

out.println("« embed src=media/"+musicBean.getName ()+" loop- false autostart= true name 
=bgss width= '460'height- '68'/» "); 

} 
$> 
<hr/> 
<p> 
<h3> 已 经 播放 的 乐曲 名 称 : < /h3> <br/> 
«jsp:getProperty name- "historyBean" property- "history"/» 
</p> 
< /body> 
</html> 


/^ 播放 音乐 - Windows Internet Explorer 
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The Heart’ s Cry 
Slip Into The World 
American Wake (The Nova Scotia Set) 


图 12-3 播放 音乐 的 历史 记录 


练习 3: 用 索引 属性 的 JavaBean 实现 多 个 音乐 文件 连续 播放 。 
已 知 3 个 程序 MusicListBean. java,musicList. jsp 和 playMusic2. jsp, 通 过 它们 实现 用 
户 可 以 选择 多 个 音乐 的 MP3 文件 ,而 且 这 些 文件 可 以 连续 播放 。 其 中 ,musicList. jsp 是 显 
示 音 乐 列表 的 多 选 表 单 , 对 应 的 代码 见 程序 清单 12-6;playMusic2. jsp 是 显示 选中 音乐 的 名 
称 以 及 连续 播放 这 些 音乐 ,对 应 的 代码 见 程序 清单 12-7, MusicListBean. java 定义 设置 和 
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获取 选中 音乐 文件 名 的 JavaBean ,并 可 以 创建 播放 列表 。 请 仔细 阅读 和 理解 程序 ,将 程序 
清单 12-8 中 的 4 个 方法 setList (String[ ] value), getName (int index), getList ( ) 和 
getNameList() 补 充 完整 ,完整 定义 MusicListBean. java。 然 后 ,编译 和 调试 程序 ,使 运行 结 
果 如 图 12-4 和 图 12-5 所 示 。 
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播放 列表 为 


0 ReelAround The Sun 

1 The Heart’ s Cry 

2 The Countess Cathleen/Momen Of The Sidhe 
3 Cacineadh Cu Chulainn (Lament) 

4 Shiwa 

5 Firedance 


6 At The Edge Df The World 


图 12-5 连续 播放 多 个 音乐 
程序 清单 12-6 : 
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<!--musicList.jsp--> 
<% @ page contentType- "text/html; charset- gb2312" 

language- "java" 

$» 
< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.wW3.org/TR/xhtmll/DTD/xhtmll- transitional .dtd"> 

<html xmlns- "http://www.w3.0rg/1999/xhtml"» 
«head» 
«meta http- equiv- "Content- Type" content- "text/html; charset- gb2312"/» 
«title» ii &</title> 
</head> 


<body> 
<p><h2>River Dance X ja] Z Ji « /n2» « /p> 
< form name= "testForm" method= "get" action- "playMusic2.jsp"» 
< fieldset title- "ill H "> 
«input type="checkbox" name="name" value- "1"> 
ReelAround The Sun 
< /input» 
<br/> 
«input type="checkbox" name= "name" value= "2"> 
The Heart's Cry 
< /input> <br/> 
«input type="checkbox" name="name" value= "3"> 
The Countess Cathleen/Women Of The Sidhe 
< /input> 
<br/> 
«input type="checkbox" name= "name" value= 
Caoineadh Cu Chulainn (Lament) 
< /input> 
<br/> 


«input type="checkbox" name="name" value= "5"> 


Shivna 

< /input» 

<br/> 

<input type="checkbox" name="name" value= "6"> 
Firedance 

</input> 

<br/> 

«input type= "checkbox" name= "name" value="7"> 
At The Edge Of The World 

< input» 

<br/> 

«input type="checkbox" name= "name" value="8"> 
Slip Into The World 
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< /input> 

<br/> 

«input type="checkbox" name= "name" value="9"> 
Riverdance 

< /input> 

<br/> 

<input type="checkbox" name="name" value="10"> 
American Wake (The Nova Scotia Set) 

« /input» 

<br/> 

<input type="checkbox" name="name" value- "11"» 
Lift The Wings 

</input> 

<br/> 

«input type="checkbox" name= "name" value= "12"> 
Amanzi 

< /input> 
<br/> 

<input type="checkbox" name="name" value= "13"> 
I Will Set You Free 

< /input> 

<br/> 

«input type="checkbox" name= "name" value= "14"> 
Let Freedom Ring 

< /input> 

<br/> 

«input type="checkbox" name="name" value= "15"> 
Macedonian Morning 

< /input> 

<br/> 

«input type="checkbox" name="name" value= "16"> 
Marta's Dance/The Russian Dervish 

< /input> 

<br/> 

<input type="checkbox" name="name" value="17"> 
Ri-Ra 

</input> 

<br/> 

«input type="checkbox" name= "name" value="18"> 
Endless Journey 

< /input> 

<br/> 

</fieldset> 
«input type="submit" value= "播放 "/> 
</form> 
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< /body» 
</html> 


程序 清单 12-7 : 


«!--playMusic2.jsp--» 

<% 8 page contentType- "text/html; charset- gb2312" language- "java" 
import- "beans .MusicListBean" 

b> 

< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.w3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"» 

«html xmlns- "http: //www.w3.0rg/1999/xhtml"» 

<head> 

«meta http- equiv- "Content- Type" content- "text/html; charset=gb2312"/> 

<title> 播 放 音 乐 < /title> 


< /head> 

<body> 

<jsp:useBean id- "listBean" scope- "page" class= "beans .MusicListBean"/> 

<p> 

<h2>River Dance X inj Z f$ « /h2><br/> 

<h4> 播 放 列表 为 < /h4> 

«t 

String[] mlist= request.getParameterValues ("name") ; // 获 取 复 选 框 选中 的 值 

if(mlist!-null) // 用 户 选 中 至 少 一 项 

listBean.setList (mlist); // 设 置 选中 的 索引 号 

int[] index- listBean.getList (); // 获 取 整 型 的 索引 号 

for (int i=0;i< index.length;i++) // 输 出 编号 和 选中 的 音乐 名 
out.println(""+i+"gnbsp;"+1istBean.getName (i)+"<br/>"); 

listBean.createASXFile (request); // 创 建 临 时 视频 播放 列表 asx 文 件 


out.println("« embed src=media/musiclist .asx"+ 
"loop- false autostart- true name=bgss width= '460' height= '68'/»"); 
$> 
</p> 
</body> 
</html> 


程序 清单 12-8 : 


//MusicListBean.java 
package beans; 
import java.io. * ; 
import javax.servlet.http. * ; 
public class MusicListBean ( 
private String[] names- ( // 设 置 音乐 名 ; 
"ReelAround The Sun", 
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"The Heart's Cry", 


// 中 间 略 
"Endless Journey"); 
private int[] list; // 选 中 音乐 列表 名 索引 
public void setName (int index, String name) { // 设 置 指定 位 置 的 音乐 名 称 
if (index< names . length&&index>=0) 
names [index]=name; 
} 
public void setNameList (String[] names) { // 设 置 所 有 有 效 的 音乐 名 
this.names- names; 
H 
public void setList (String[] value)( // 设 置 选中 的 音乐 名 列表 
) 
public String getName (int index) { // 获 取 指 定 音 乐 的 名 称 
) 
public int[] getList () { // 获 取 索 引 列表 
) 
public String[] getNameList () { // 获 取 所 有 有 效 的 音乐 名 
) 
public boolean createASXFile (HttpServletRequest request) { // 创 建 播放 列表 文件 
String path= request .getRealPath ("."); 
try{ 


File f=new File (path* "\\media\\musiclist.asx") ; 
if (f.exists ()) 
f.delete(); // 如 果 存 在 删除 
FileWriter fw=new FileWriter (path+ "\\media\\musiclist.asx"); 
BufferedWriter bw=new BufferedwWriter (fw) ; 
bw.write ("< asx version=\"3.0\">"); 
bw.newLine () ; 
if (list==null) return false; 
for (int i=0;i< list.length;i++) { 
bw.write ("<entry>"); 
bw.newLine(); 
bw.write("« ref href= V"http: //1ocalhost:8080/chapterl2/media/"4 (list [i]+1)+".mp3 
An» n)yz 
bw.newLine(); 
bw.write("«title» "+names [list [i]]+ "< /title» "); 
bw.newLine () ; 
bw.write ("< /entry» "); 
bw.newLine (); 
} 
bw.write ("< /asx»"); 
bw. flush () 7 // 将 数据 更 新 至 文件 
fw.close(); // 关 闭 文件 流 
}catch (IOException e) { 


» 217 * 


return false; 
H 
return true; 
} 
} 


说 明 : asx 文 件 是 用 XML 表示 播放 信息 的 播放 列表 文件 。 一 般 形 式 如 下 : 


«asx version="3.0"> 


<entry> <!-- 播 放 文件 信息 --> 
<ref>…</ref> <!-- 说 明 播 放 文 件 位 置 --> 
<title>… .</title> <!-- 说 明 播放 音乐 的 名 称 --> 
<author>…< /author> <!-- 作 者 --> 

< /entry» 

«entry» 

« /entry» 

< /asx> 


12.3 实验 12.2 JavaBean 连接 数据 库 


实验 目的 : 


(1) 进一步 了 解 JavaBean 的 应 用 。 

(2) 了 解 JavaBean 实现 数据 库 的 访问 。 

(3) 初步 了 解 JSP 十 JavaBean 的 工作 模式 。 

(4) 运用 JavaBean 访问 数据 库 , 开 发 具有 实际 意义 的 应 用 。 
(5) 深入 了 解 和 应 用 JDBC 访问 Web 数据 库 。 


实验 内 容 : 


ForumLite 2. 1 是 Internet 上 用 PHP 语言 开发 的 一 个 最 小 论坛 系统 。 模 仿 ForumLite 


2. 1 的 结构 设计 一 个 具有 最 基本 功能 的 简易 论坛 。 功 能 要 求 如 下 。 


此 系统 要 实现 允许 用 户 浏 览 论 坛 .发表 新 论点 ,也 可 以 浏览 并 回复 论 


坛 的 已 有 论点 。 论 


坛 中 所 有 的 数据 信息 用 MySQL 数据 库 保 存 。 要 求 用 JavaBean 处 理 对 数据 库 的 访问 。 具 


体 功 能 要 求 。 
(1) 要 求实 现 用 户 的 注册 与 登录 。 


(2) 任何 用 户 可 以 直接 发 表 论题 ,论题 包括 标题 内容、 发 表 者 的 电子 邮件 和 发 表 日 期 ; 


如 果 有 用 户 对 该 论题 回复 ,要 求 能 显示 已 回复 论题 的 次 数 。 
(3) 任何 用 户 可 以 浏览 已 发 表 的 论题 ,并 可 以 针对 特定 的 论题 进行 
括 标题 内容、 回复 者 的 电子 邮件 以 及 回复 的 时 间 。 
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回复 。 回 复 信息 包 


(4) 要 求 所 有 论题 以 分 页 的 形式 显示 ,每 页 面 10 个 论题 。 
(5) 要 求 某 论题 的 所 有 回复 也 以 分 页 显示 ,每 页 面 显 示 10 个 回复 。 


实验 步骤 : 


本 次 实验 主要 有 两 个 具体 任务 : 利用 JavaBean 访问 MySQL 数据 库 , 实 现 对 保存 论坛 
信息 的 MySQL 的 连接 ,以 及 对 论坛 的 浏览 和 论题 回复 信息 的 添加 ;利用 JavaBean 实现 数 
据 的 分 页 访问 。 要 求 如 下 。 

(1) 用 MySQL 数据 库 保 存 信 息 。 请 用 MySQL 数据 库 ,建立 一 个 数据 库 
ForumDB ,在 数据 库 ForumDB 下 建立 一 个 保存 论坛 论题 的 数据 表 ForumsTable 和 保存 
回复 信息 的 数据 表 ReplysTable。 建 立 数据 库 和 数据 表 的 文件 见 程序 清单 12-9 的 
ForumDB. sql. 

程序 清单 12-9: 


/ * ForumDB.sql* / 
create database if not exists ForumDB; 
use ForumDB; 


create table if not exists ForumsTable( 


m 


forum id INT UNSIGNED AUTO INCREMENT NOT NULL, 
PRIMARY KEY (forum id), 

ftitle VARCHAR(50) NOT NULL, 

ftime INT NOT NULL, 

fauthor VARCHAR (20) NOT NULL, 

femail VARCHAR (50) NOT NULL, 

fdate DATETIME NOT NULL, 

fcontent TEXT 


create table if not exists ReplysTable ( 


); 


reply id INT UNSIGNED AUTO INCREMENT NOT NULL, 
PRIMARY KEY (reply id), 

f id INT NOT NULL, 

rtitle VARCHAR (50) NOT NULL, 

rauthor VARCHAR(20) NOT NULL, 

remail VARCHAR(50) NOT NULL, 

rdate DATETIME NOT NULL, 

rcontent TEXT 


// 创 建 数据 库 ForumDB 
// 打 开 数 据 库 ForumDB 
// 创 建 ForumsTable 表 , 保 存 论坛 
// 主 题 信息 
// 定 义 主题 编号 ,自动 编码 类 型 非 空 
//forum id 为 主键 
// 标 题 非 空 
// 回 复 主 题 的 次 数 非 空 
// 作 者 名 
// 发 论题 的 email 
// 创 建 论题 的 时 间 
// 论 题 的 内 容 


// 创 建 ReplysTable 表 ,保存 回复 
// 定 义 回复 编号 ,自动 编码 非 空 
//reply id 为 主键 

// 论 题 的 编号 

// 回 复 的 标题 

// 回 复 的 作者 

// 回 复 信息 的 E-mail 

// 回 复 论题 的 时 间 

// 回 复 的 内 容 


(2) 已 知 有 3 个 JavaBean 程序 : TopicBean. java, ConnectDBBean. java 和 PageBean. 
java, iX 3 个 程序 分 别 实现 保存 论坛 发 表 的 意见 、 数 据 库 的 连接 和 对 分 页 的 处 理 。 其 中 
TopicBean. java 如 程序 清单 12-10 所 示 。 要 求 : 自行 设计 实现 其 他 JavaBean, 实 现 对 两 个 
数据 表 的 访问 ,以 及 编写 相关 的 ISP 文件 ,使 运行 结果 如 图 12-6 一 图 12-9 所 示 。 
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图 12-6 论坛 的 新 用 户 注册 


12-7 论坛 的 用 户 登 录 界 面 


程序 清单 12-10; 


//TopicBean.java 

package JavaBean; 

import java.sql.* ; 

/** 

* 定义 表示 发 表意 见 的 JavaBean, fii 4 4 TopicBean, 

* 可 以 将 发 表 的 论题 和 回复 论题 用 该 TopicBean 表示 。 不 同 之 处 在 于 
* 回复 论题 不 需要 设置 回复 次 数 。 

*/ 

public class TopicBean { 
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private String title; // 标 题 


private String author; // 作 者 

private String email; // 电 子 邮 件 

private Timestamp date; // 日 期 

private String content; // 内 容 

private int times; // 如 果 是 论题 ,表示 回复 次 数 ; 如 果 是 回复 表示 要 回复 论题 的 编码 


public String getTitle() { 


return title; 


public void setTitle (String title) { 
this.title-title; 


public String getAuthor() { 


return author; 


public void setAuthor (String author) ( 
this.author- author; 


public String getEmail() { 
return email; 

) 

public void setEmail (String email) { 
this.email=email; 

} 

public Timestamp getDate () { 
return date; 

} 

public void setDate (Timestamp date) { 
this.date=date; 

) 

public String getContent() { 
return content; 

) 

public void setContent (String content) ( 
this.content- content; 

) 

public int getTimes() { 
return times; 

} 


public void setTimes (int times) { 
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this.times-times; 


H 


) 


(3) 观察 图 12-6 — Al 12-9 ,请 修改 相关 程序 ,用 JavaScript 补充 对 用 户 提交 信息 的 验 
证 ,例如 保证 输入 的 email 格式 类 似 “XXXQXXX. XXX. XXX" ,又 如 输入 的 标题 .留言 人 的 
信息 分 别 不 能 超过 50 和 20 个 字符 。 

(4) 本 简单 论坛 中 输入 中 文 信息 会 出 现 乱码 现象 ,请 编写 一 个 JavaBean 程序 来 解决 乱 
码 现象 ,并 修改 相关 程序 ,来 解决 乱码 问题 。 

(5) 请 分 析 自 行 编写 的 JavaBean 程序 ,请 将 JavaBean 程序 按照 功能 分 类 ,来 说 明 
JavaBean 的 主要 作用 。 


12.4 实验 12.3 JavaBean 组 件 收发 E-mail 


实验 目的 : 
(1) 进一步 了 解 JavaBean 的 高 级 应 用 。 


(2) PRA T fft ISP+ JavaBean 的 开发 模式 。 
(3) 初步 了 解 JavaMail API 应 用 接口 的 应 用 。 


实验 内 容 : 


JavaMail API 是 平台 独立 的 应 用 程序 接口 ,用 于 开发 E-mail 的 应 用 ,处 理 邮件 的 发 送 
和 接收 。 本 实验 应 用 JavaMail API 来 开发 相应 的 JavaBean 组 件 实现 E-mail 的 接收 和 发 送 
的 功能 。 
实验 步骤 : 

开发 接 发 E-mail 的 Web 应 用 要 使 用 JavaMail API 1. 4. 1 和 JavaBeans Activation 
Framework(JAF)。 其 中 JavaMail API 1. 4. 1 可 以 到 “http://www. sun. com” 网 站 下 载 。 


如 果 使 用 的 是 JDK 1.6 以 下 版 本 ,同样 需要 到 sun 网 站 下 载 JAF。 注 意 : 如 果 使 用 JDK 1.6 以 
及 以 上 版 本 , 则 已 经 包含 了 JAF. JavaMail API 1. 4. 1 常见 的 类 以 及 说 明 见 表 12-3。 


表 12-3 JavaMail API 常见 的 类 


类 说 明 
javax. mail. Properties Properties 创建 一 个 session 对 象 。 用 于 将 寻找 字符 串 
mail. smtp. host' 属 性 值 就 是 发 送 邮件 的 主机 
javax. mail. Session Session 类 代表 JavaMail 中 的 一 个 邮件 session 
javax. mail. Transport Transport 是 用 来 发 送信 息 
javax. mail. MimeMessage Message 对 象 将 存储 实际 发 送 的 电子 邮件 信息 
javax. mail. InternetAddress javax. mail. InternetAddress 类 。 用 于 确定 邮件 地 址 
javax. mail. Store Store 类 实现 特定 邮件 协议 上 的 读 、 写 ,监视 ,查找 等 操作 


° 223 。 


类 


续 表 
说 明 


javax. mail. Folder 


javax. mail. Internet. MimeMultpart 


javax. mail. Internet. MimeBodyPart 


Folder 类 用 于 分 级 组 织 邮 件 , 并 提供 照 Javax. mail. Message 
格式 访问 E-mail 的 能 力 

MultPart 的 子 类 .是 保存 电子 邮件 内 容 的 容器 。 它 定义 了 增 
加 和 删除 及 获得 电子 邮件 不 同 部 分 内 容 的 方法 

是 BodyPart 的 子 类 , MimeBodyPart 代表 一 个 MimeMessage 
对 象 内 容 的 一 部 分 。 每 个 MimeBodyPart 被 认为 有 两 部 分 : 
MIME 类 型 .匹配 这 个 类 型 的 内 容 


在 执行 具体 练习 之 前 ,请 将 JavaMail API 的 mail. jar( 如 果 JDK 版 本 低 于 6.0, 还 要 将 
JAF 的 activation. jar) 保存 在 对 应 W 应 用 的 “WEB-INF\lib” 目 录 中 。 为 了 初步 了 解 
JavaMail API 的 应 用 ,本 实验 提供 一 个 简易 实现 收发 邮件 的 JavaBean 程序 MailBean. java. 


具体 代码 见 程序 清单 12-11. 
程序 清单 12-11 : 
//MailBean.java 
package beans mail; 


import java.io.BufferedReader; 


import java.io.InputStream; 


import java.io.InputStreamReader; 


import java.util. * ; 


import javax.mail.* ; 


import javax.mail.internet.* ; 


import javax.activation. * ; 
public class MailBean ( 


private String username- ""; 
private String password- ""; 
private String frome""; 
private String to-""; 
private String copyto=""; 
private String subject=""; 


private String message=""; 


// 用 户 名 

// 密 码 

// 寄 信人 

// 收 信人 

// 转 发 收 信人 列表 
// 主 题 

// 邮 件 内 容 

// 附 件 


private String attachedFile- ""; 

private String smtpHost- "smtp.xxx.xxx.xx"; 
private String pop3Host- "pop3.xxx.Xxx.xx"; 
private MimeMessage mimeObj; 


private Properties props; 
private boolean needAuth- false; 
private Multipart mp; 
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// 发 送 邮件 的 SMTP 服务 器 
// 收 邮件 的 Pop3 服务 器 
/ /MIME 邮件 对 象 


// 系 统 属性 
//smtp 是 否 需 要 认证 


/ Multipart 对 象 ,邮件 内 容 , 标 题 ,附件 等 内 容 均 添 加 到 其 中 后 再 生成 MimeMessage 对 象 
[8% 
* 邮件 基本 信息 设置 
*/ 
public String getAttachedFile() { 
// 获 取 附 件 的 名 字 
return attachedFile; 
) 
public void setAttachedFile (String attachedFile) ( 
// 设 置 附件 名 
this.attachedFile- attachedFile; 
} 
public String getFrom() { 


// 获 取 寄 信 人 


return from; 


) 
public void setFrom(String from) ( 


// 设 置 寄 信人 


this.from- from; 


public String getMessage() ( 
// 获 取 邮 件 内 容 


return message; 


public void setMessage (String message) { 
// 设 置 邮件 内 容 
this.message=message; 

} 

public String getPassword() ( 
// 获 取 密 码 


return password; 


public void setPassword (String password) { 
// 设 置 密码 
this.password- password; 


public String getSubject() { 
// 获 取 邮 件 主题 
return subject; 
} 
public void setSubject (String subject) { 
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// 设 置 邮 件 主 题 
this.subject- subject; 


public String getTo() { 
// 获 取 收 信人 


return to; 


public void setTo (String to) { 
// 设 置 收 信人 
this.to-to; 
) 
public void setCopyto (String copyto) { 
// 设 置 邮件 转发 
this.copyto- copyto; 


public String getCopyto() { 
// 获 取 转 发 收 信人 列表 
return copyto; 
) 
public String getUsername() ( 
// 获 取 用 户 名 
return username; 
} 
public void setUsername (String username) { 
// 设 置 用 户 名 


this.username- username; 
} 


/** 


* 发 邮件 部 分 


**/ 

public void setSmtpHost (String hostName) { 
// 设 置 SMTP 服务 器 
smtpHost- hostName; 


public String getSmtpHost () { 


return smtpHost; 


public boolean addAttachedFile () ( 
// 添 加 附件 到 邮件 
tryt 
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BodyPart bp- new MimeBodyPart () ; 
FileDataSource fileds=new FileDataSource (attachedFile) ; 
// 创 建文 件数 据 源 
bp.setDataHandler (new DataHandler (fileds)); 
// 设 置 数据 处 理 器 
bp.setFileName (fileds.getName|()); 
// 设 置 附件 文件 名 
mp.addBodyPart (bp) ; 
// 添 加 邮件 附件 
return true; 
) 
catch (Exception e) { 
System.err.println (" 增 加 邮件 附件 : "+ attachedFile+ "E ^E fix ! "*e); 


return false; 


public boolean addFrom()( 
// 添 加 发 信人 地 址 到 邮件 
try{ 
mimeObj.setFrom(new InternetAddress (from)); 
// 设 置 发 信人 邮件 地 址 
return true; 
) 
catch (Exception e)( 
return false; 
) 


public boolean addMessage () { 
// 添 加 邮件 内 容 
try{ 
BodyPart bp- new MimeBodyPart () ; 
// 创 建 保存 电子 邮件 内 容 的 容器 
bp.setContent ("« meta http- equiv- Content- Type content- text/html; charset- 
gb2312» "+ message, "text/html; charset- GB2312") ; 
// 设 置 邮件 内 容 
mp.addBodyPart (bp) ; 
// 邮 件 正文 添加 到 电子 邮件 
return true; 
) 
catch (Exception e) { 
System.err.println (" 设 置 邮件 正文 时 发 生 错误 !"+e): 


return false; 
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public boolean addSubject () { 
// 添 加 邮件 主题 到 邮件 
tryt 
mimeObj.setSubject (subject) ; 
return true; 
) 
catch (Exception e) { 
System.err.println ("H E WD (FE BUR AE HRI"); 


return false; 


public boolean adqTo (){ 
// 添 加 发 信人 
if(to--null) 


return false; 


try{ 
mimeObj.setRecipients (javax.mail.Message.RecipientType.TO, 
InternetAddress.parse (to)); 
// 设 置 收 信人 的 地 址 
return true; 
} 
catch (Exception e) { 


return false; 


) 
public boolean addCopyto () { 
// 添 加 转发 列表 
if (copyto==null) return false; 
try{ 
mimeObj .setRecipients (javax.mail.Message.RecipientType.CC, 
(Address []) InternetAddress .parse (copyto) ) ; 
return true; 
H 
catch (Exception e) 


{ return false; } 


public void setNeedAuth (boolean need) { 
// 设 置 SMTP 身 份 认 证 
if(props--null) 
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props- System.getProperties () ; 


if (need) { 
props.put ("mail.smtp.auth", "HK JJ] ") ; 
jelse{ 


props.put ("mail.smtp.auth", "KR Wi"); 


) 
public boolean sendMail () { 


// 发 送 邮件 
if(props--null) 
props=System.getProperties () ; // 获 得 系统 属性 对 象 
props.put ("mail.smtp.host",getSmtpHost ()) ; // 设 置 SMTP 主机 
Session session; 
session-Session.getDefaultInstance (props, null); // 获 得 邮件 会 话 对 象 
mimeObj- new MimeMessage (session) ; // 创 建 MIME 邮件 对 象 
mp- new MimeMultipart (); // 创 建 MimeMultipart 对 象 ,保存 邮 件 所 有 信息 
setNeedAuth (true) ; 


if(!from.equals ("")) addFrom(); 
else 
return false; 
if(!to.equals("")) addTo(); 
else 
return false; 
if(!copyto.equals("")) 
addCopyto () ; 
if(!subject.equals("")) 
addsubject () ; 
if (!message.equals ("") ) 
addMessage () ; 
if(!attachedFile.equals("")) 
addAttachedFile() ; 


tryt 
mimeObj.setContent (mp) ; 
// 设 置 邮件 内 容 
mimeObj.saveChanges () ; 
// 保 存 邮 件 
Session mailSession- Session.getInstance (props, null); 
// 建 立 邮 件 会 话 
Transport transport-mailSession.getTransport ("smtp"); 
// 创 建 发 送 对 象 
transport .connect ( (String)props.get (getSmtpHost () ) ,getUsername () , getPassword () ) ; 
/ [ie f& SMTP 服务 器 
transport.sendMessage (mimeObj, 
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mimeCbj .getRecipients (javax.mail .Message.RecipientType .TO) ) ; 


// 发 送 邮件 
transport.close(); 
// 关 闭 发 送 对 象 
return true; 
} 
catch (Exception e) { 
System.err.print1n (" 邮 件 发 送 失 败 !"+e); 


return false; 


/* 
* 收 邮件 处 理 
*/ 
public String getPop3Host () ( 
// 获 取 Pop3 主机 名 
return pop3Host; 
) 
public void setPop3Host (String pop3Host) ( 
// 设 置 pop3 主机 
this.pop3Host- pop3Host; 
) 
public String receiveMail (String pop3Host) ( 
// 收 邮件 
String mailcontent- ""; 
Store store-null; 
Folder folder-null; 
try ( 
Properties props- System.getProperties (); 
Session session-Session.getDefaultInstance (props, null); 
// 建 立 收 邮件 会 话 
store= session.getStore ("pop3") ; 
// 准 备 收 邮件 
Store.connect (pop3Host, username, password); 
// 连 接 pop3 服务 器 
folder= store.getDefaultFolder () ; 
// 获 取 收 件 箱 
if(folder--null) 
throw new Exception (" 没 有 邮箱 "); 
folder- folder.getFolder ("inbox"); 
if(folder--null) 
throw new Exception ("no pop3 inbox"); 
folder.open(folder.READ ONLY); 
// 收 件 箱 设 置 成 只 读 
Message[] msgs= folder.getMessages(); 
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// 读 取信 件 
int getMaillen-0; 
if (msgs.length« 5) 
getMaillen-5; 
else 


getMaillen-msgs.length; 


for (int msgnum- 0; msgnum < getMaillen; msgnum++) { 


mailcontent=mailcontent+ getMailMessage (msgs [msgnum]) + "\n\n\n\n"; 


} 
catch (Exception ex) { 
ex.printStackTrace(); 
} 
finally { 
try { 
if (folder! =null) folder.close (false); 
if (store!=null) store.close(); 
} 
catch (Exception ex2) { 
ex2.printStackTrace () ; 


} 
return mailcontent; 
) 
public String getMailMessage (Message message) { 
// 收 取 邮 件 的 具体 内 容 
String mails-null; 
try ( 


String fromadr- ( (InternetAddress) message.getFrom() [0]) .getPersonal () ; 


if(fromadr-- null) 


fromadr- ((InternetAddress)message.getFrom() [0]) .getAddress () ; 


// 获 取 发 邮件 地 址 ; 

mails- "from: "+ fromadr; 

String subject-message.getSubject () ; 
mails=mails+ "\n"+ "subject: "+ subject; 
// 获 取 邮 件 主题 

Part multiPart-message; 

Object content=multiPart .getContent () 7 
if(content instanceof Multipart) ( 


multiPart- ((Multipart)content) .getBodyPart (0) ; 


mails=mails+ "An"«"[ multipart message ]"; 


} 
// 获 取 邮 件 内 容 


mails-mails- "\n"+ "content: "+ content.toString() 7 
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String contenttype=multiPart .getContentType () ; 
mails-mails- "\n"+ "content :"+ contenttype; 
if(contenttype.startsWith ("text/plain") || contenttype.startsWith ("text/html")) ( 
// 判 断 邮件 类 型 
InputStream is-multiPart.getInputStream(); 
BufferedReader reader- new BufferedReader (new InputStreamReader (is)); 
String thisline- reader.readLine(); 
while(thisline!-null) ( 
mails-mails-* "An"4thisline; 


thisline= reader .readLine () ; 
) 
) 
) 
catch (Exception ex) ( 
ex.printStackTrace(); 


) 
return mails; 


) 

5&2] 1; 用 JavaBean 发 邮件 。 

请 仔细 阅读 MailBean. java. 利用 该 JavaBean 实现 SMTP 发 邮件 。 运 行 结果 如 
图 12-10 一 图 12-12 所 示 。 


WEB 和 ail 邮 件 系统 - Windows Internet Explorer 


文件 中 ME 查看 WD RRO TAD ho — sect EE GT 
GO Bi nep: /1ocuthost:8090/veb/14bbook/nsi1/ 


12-10 登录 界面 


Dntitled Dpcrmmezt = Dindews Internet Explorer 
文件 下， B £50 KARA IAO EO Gst Bet 
http //localbost:8080/web/labbook/mail/login jsp 


SNTP 服 务 器 《发 邮件 》 
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图 12-11 设置 收发 邮件 服务 器 
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12-12 发 邮件 界面 


练习 2: 利用 JavaBean 接收 邮件 。 

本 次 练习 是 利用 MailBean. java 实现 POP3 邮件 的 收取 。 具 体 要 求 如 下 。 

CD 仔细 阅读 MailBean. java 中 的 receiveMail( ) 方 法。 了 解 JavaMail API 实现 
POPS 收 邮件 的 主要 应 用 。 请 修改 程序 清单 12-12 的 handreceiveMail. jsp 程序 ,观察 运 
THR 

程序 清单 12-12 : 


<% 6 page contentType- "text/html; charset-utf- 8" language- "java" import- "beans.mail.* " $> 
< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.wW3.org/TR/xhtmll/DTD/xhtmll- transitional.dtd"» 
< ! - -handlereceiveMail.jsp--» 
«html xmlns- "http: //www.w3.0rg/1999/xhtml"» 
<head> 
«meta http- equiv= "Content-Type" content= "text/html; charset=utf- 8" /> 
<title> 收 邮件 < /title» 
</head> 
<body> 
« jsp:useBean id= "mailbean" scope- "session" class= "beans.mail.MailBean" /> 
<% 

mailbean.setPop3Host ("pop3.sina.com.cn"); 

// 设 置 POPS 主机 ,请 根据 实际 情况 修改 

mailbean.setUsername ("xxx@ sina.com.cn"); 

// 设 置 登录 邮件 名 ,请 根据 实际 情况 修改 

mailbean.setPassword ("123456"); 

// 设 置 登录 密码 ,请 根据 实际 情况 修改 

out.println (" 收 到 的 邮件 : <br/>"); 

out .println (mailbean.receiveMail (mailbean.getPop3Host ())); 
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< /body> 

</html> 

(2) 运行 上 述 的 handlereceiveMail. jsp ,可 以 输出 POP3 账号 收 件 箱 5 封 邮 件 内 容 , 请 
修改 该 JavaBean. KI POP3 收 邮件 ,并 将 收取 的 邮件 放置 在 数据 库 中 保存 ,要 求 每 次 只 能 
收取 新 邮件 (提示 ,可 以 考虑 用 邮件 的 标记 来 确定 是 否 是 新 邮件 ) 。 
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第 13 章 JSP 的 Servlet 编程 


Servlet 是 早 于 JSP 出 现 的 一 种 服务 器 端的 开发 技术 。 由 于 具有 和 良好 的 业务 逻辑 处 理 
能 力 , 常 作为 控制 器 ,与 JavaBean 和 JSP 结合 形成 JSP 第 二 种 MVC 开发 模式 。Servlet H. 
有 执行 效率 高 ,继承 了 Java 语言 的 平台 无 关 性 、 功 能 强大 等 特点 。 因 此 在 很 多 Web 应 用 领 
域 中 得 到 应 用 。 本 章 简略 介绍 Servlet 编程 的 要 点 以 及 设计 与 Servlet 编程 相关 的 实验 。 


13.1 预备 知识 


Servlet 是 应 用 标准 Servlet API 开 发 的 Java 程序 。Servlet 可 扩展 服务 器 的 功能 ,实现 
强大 的 Web 应 用 。 在 本 节 中 主要 了 解 开发 Servlet 程序 的 常见 Servlet API 应 用 程序 接口 、 
Servlet 的 开发 与 部 署 以 及 JSP 的 两 种 MVC 开发 模式 。 


13.1.1 常见 的 Servlet API 


Servlet API 是 一 个 标准 的 Java 扩展 程序 接口 ,主要 由 两 个 包 : javax. servlet 和 javax. 
servlet. http 所 构成 。javax. servlet 包 定 义 了 针对 开发 客户 自 定义 协议 应 用 的 类 和 接口 , 具 
体内 容 见 表 13-1, javax. servlet. http 包 主 要 定义 了 应 用 于 HTTP 协议 相关 的 类 和 接口 ， 
具体 内 容 见 表 13-2。 这 两 个 扩展 包 也 构成 了 Servlet 的 基本 框架 。Servlet 程序 实际 上 就 是 
Java 程序 ,只 是 它 必须 要 应 用 Servlet API 来 实现 功能 。 

无 论 是 实现 用 户 自 定义 协议 的 Servlet 程序 还 是 实现 HTTP 协议 的 Servlet 程序 ,都 必 
须 具 有 一 个 生命 周期 。Servlet 的 生命 周期 分 成 3 个 阶段 : 初始 化 阶段 .响应 用 户 请 求 阶段 
和 终止 阶段 。 

(1) 初始 化 阶段 。 实 现 了 Servlet 装载 到 Servlet 容器 中 , Servlet 容器 会 创建 一 个 
Servlet 对 象 ,并 调用 init() 方 法 对 该 对 象 进行 初始 化 。 


# 13-1 javax. servlet 包 


类 和 接口 描 述 
Servlet 开发 Servlet 的 接口 
RequestDispatcher 抽象 接口 .创建 接受 用 户 的 请 求 , 并 发 送 请 求 到 其 他 资源 的 
ServletRequest 定义 请 求 对 象 ,封装 请 求 信息 
ServletResponse 定义 响应 对 象 ,封装 响应 信息 
ServletConfig Servlet 容器 为 实现 Servlet 初始 化 传递 信息 
ServletContext 定义 Servlet 程序 与 Servlet 容器 通信 的 上 下 文 
GenericServlet 抽象 类 .为 开发 独立 协议 应 用 的 Servlet 类 提供 支持 
ServletInputStream 类 .输入 流 用 于 读 取 客户 传递 的 信息 
ServletOutputStream 类 ,输出 流向 客户 发 送信 息 
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X 13-2 javax. servlet. http & 


类 和 接口 d 述 
HttpServlet 抽象 类 ,定义 与 HTTP 协议 相关 的 Servlet, 是 GenericServlet 的 子 类 
HttpServletRequest 是 ServletRequest 的 扩展 ,封装 HTTP 协议 的 请 求 
HttpServletResponse 是 ServletResponse 的 扩展 ,封装 HTTP 协议 的 响应 
HttpSession 定义 实现 Session 机 制 的 一 个 接口 
Cookie 定义 Cookie 的 类 


(2) 响应 用 户 请 求 阶段 。Servlet 容器 根据 用 户 请 求 , 生 成 ServeltRequest 对 象 和 
ServletResponse 对 象 ,分 别 封装 请 求 信息 和 响应 信息 。 然 后 调用 Servlet 的 service() 方 法 ， 
接收 ServeltRequest 和 ServletResponse 对 象 ,并 执行 Servlet 的 处 理 。 

(3) Servlet 终止 阶段 。Servlet 容器 调用 destroy() 方 法 清除 Servlet 对 象 ,释放 Servlet 
占据 的 空间 。 


13.1.2 Servlet 的 开发 与 部 署 

根据 应 用 范围 不 同 , 可 开发 的 Servlet 类 分 成 两 种 。 

COD 实现 用 户 自 定义 的 Servlet 类 , 它 必 须 是 javax. servlet. GenericServlet 类 的 子 类 ， 
在 编写 这 种 Servlet 类 是 , 必须 用 extends 扩展 GenericServlet。javax. servlet. 
GenericServlet 的 常见 方法 见 表 13-3。 


表 13-3 javax. servlet, GenericServlet 类 的 常见 方法 


方 法 d x 
void init 初始 化 Servlet X1 
void service(ServletRequest. ServletResponse) 执行 Servlet 的 请 求 ,并 响应 
void destroy() 清除 Servlet 
ServletConfig getServletConfig() 获取 ServletConfig 对 象 
ServletContext getServletContext() 获取 ServletContext 对 象 
java. lang. String getServletInfo() 获取 Servlet 的 相关 信息 


(2) 实现 HTTP 协议 的 Servlet 类 。 这 种 Servlet 类 是 扩展 HttpServlet 的 子 类 。 
javax. servlet. http. HttpServlet 的 常见 方法 见 表 13-4, 


表 13-4 javax. servlet. http. HttpServlet 类 的 常见 方法 


Ao d 描 X 


protected void : 
!G p 
doGetCHttpServletRequest. HttpServletResponse) 服务 器 调用 处 理 Get OR 


protected void 
! Post 的 请 
doPostCHttpServletRequest, HttpServletResponse) | 服务 党 调用 处 理 Post 的 请 求 


protected void 


doDelete( HttpServletRequest. HttpServletResponse) LA TE TRU AE RM ER SCR 


protected void 


、 a 
doPutC HttpServletRequest, HttpServletResponse) 服务 器 调用 处 理 Put 的 请 求 
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A o dX d R 


Protected void » 
Ti x] 
doTrace( HttpServletRequest, HttpServletResponse) 服务 器 调用 处 理 Trace 的 请 求 


protected void 从 service() 方 法 中 获取 HTTP 头 ,并 处 理 这 个 
doHead(HttpServletRequest，HttpServletResponse) 请 求 


protected void x 
O » 
doOption( HttpServletRequest, HttpServletResponse) 服务 器 调用 处 理 Option 的 请 求 


Protected void 接受 HTTP 请 求 ,转发 请 求 到 doXXX() 系 列 方 
service( HttpServletRequest, HttpServletResponse) 法 处 理 请 求 


编写 好 一 个 Servlet 程序 后 ,需要 成 功 编译 生成 class 文件 后 ,就 要 进入 部 署 阶段 。 
Servlet 的 部 署 实际 上 就 是 将 Servlet 部 署 成 为 一 个 Web 应 用 。 需 要 为 对 应 的 Web 应 用 的 
web. xml 中 定义 Servlet 以 及 Servlet 的 映射 。 其 中 web. xml 中 关于 Servlet 映射 的 常见 标 
记 见 表 13-5。 


表 13-5 web. xml 部 署 Servlet 的 常见 标记 


标 记 描 x 
servlet 定义 Servlet 元 素 
servlet-name 定义 Servlet 的 名 字 
servlet-class 指定 Servlet 的 类 
jsp-file 将 jsp 文件 配置 成 Servlet, 注 意 不 能 与 servlet-class 元 素 同时 使 用 
load-on-startup 设置 Servlet 启动 的 优先 级 
init-param 设置 Servlet 的 初始 化 参数 
param-name 指定 Servlet 的 参数 名 ,必须 与 init-param 联合 使 用 
servlet-mapping 设置 Servlet 的 映射 
url-pattern 指定 Servlet 映射 的 url 模式 ,可 以 出 现 多 次 ,必须 与 servlet- 
mapping 元 素 中 出 现 


13.1.3 JSP 的 两 种 开发 模式 的 比较 


Sun Microsystems 公司 发 布 了 JSP 的 两 种 开发 模式 : JSP 十 JavaBean 和 JSP 十 
JavaBean 十 Servlet。 这 两 种 工作 模式 实现 了 MVC( 模 型 -视图 -控制 ) 模 型 。 

1. JSP+JavaBean 

JSP+ JavaBean 模式 中 ,JSP 承担 了 MVC 中 的 控制 器 和 视图 的 部 分 ,JSP 接受 用 户 的 
请 求 ,以 及 处 理 的 响应 结果 ,实现 流程 的 控制 以 及 内 容 的 显示 。 对 于 JavaBean 承担 着 模型 
的 功能 ,实现 对 数据 的 访问 和 人 处理 。JSP 和 JavaBean 之 间 的 关系 见 图 13-1。 

2. JSP--JavaBean- Servlet 

JSP+ JavaBean + Servlet 模式 中 ,JSP 作为 视图 ,控制 器 部 分 从 JSP 中 脱离 出 来 ,由 
Servlet 来 承担 。 至 于 JavaBean 仍 充 当 模 型 的 部 分 ,实现 数据 部 分 的 处 理 。JSP JavaBean 
和 Servlet 之 间 的 关系 见 图 13-2, 
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图 13-1 JSP+JavaBean 工作 模式 图 13-2 JSP+JavaBean+ Servlet 工作 模式 
3. 二 者 的 比较 


JSP 十 JavaBean 中 ,JSP 承担 了 控制 器 和 视图 的 两 种 功能 。 这 导致 了 JSP 页面 中 存在 
大 量 的 Java 代码 ,页 面 难以 维护 。 但 是 在 开发 小 型 Web 应 用 上 存在 灵活 开发 简单 的 优 
势 。 至 于 JSP+ JavaBean 十 Servlet 模型 ,MVC 各 层次 的 关系 更 加 清晰 。Servlet 分 担 了 
JSP 原来 的 控制 器 的 角色 ,一 方面 使 得 JSP 可 以 充分 表现 视图 ; 另 一 方面 使 得 Servlet 充分 
体现 处 理 业 务 逻 辑 的 优势 。JSP+JavaBean 十 Servlet 模式 广泛 应 用 在 复杂 大 型 的 Web 应 
用 中 。 


13.2 实验 13.1 Servlet 的 开发 和 部 署 


实验 目的 : 


(1) 了 解 开 发 Servlet 的 全 过 程 。 

(2) 了 解 开 发 用 户 自 定义 协议 的 Servlet 和 HTTP 协议 的 Servlet 的 不 同 。 
(3) 了 解 和 熟练 部 署 Servlet 的 web. xml。 

(4) 了 解 和 掌握 HttpServlet 实现 处 理 客户 端的 请 求 。 


实验 内 容 : 


CD 开发 Servlet ,要 求实 现 一 个 计数 器 ,计算 访问 该 Servlet 的 次 数 。 要 求 : 分 别 用 用 
户 自 定 义 协 议 的 Servlet 和 实现 HTTP 协议 的 Servlet 来 实现 这 样 的 一 个 信息 的 输出 。 并 
定义 对 应 Web 应 用 的 web. xml, 实 现 对 Servlet 的 部 署 ,以 及 运行 部 署 后 的 Servlet. 

(2) 处 理 表单 数据 的 Servlet。 要 求 : 设计 一 个 可 以 显示 个 人 简历 信息 的 Servlet。 其 
中 ,个 人 简历 的 信息 由 用 户 从 表单 中 设置 。 


实验 步骤 : 


5&2] 1: 用 Servlet 实现 计数 器 。 

本 练习 是 要 求 开发 不 同类 型 的 Servlet ,实现 计数 器 ,来 计算 访问 Servlet 的 次 数 。 具 体 
要 求 如 下 : 

(1) 下 列 程序 清单 13-1 定义 了 CounterServlet. java 程序 ,仔细 阅读 该 程序 ,判断 该 
Servlet 是 否 可 以 计算 访问 次 数 。 编 译 该 Java 程序 .将 编译 后 的 程序 保存 在 WEB-INFN 
classes 目录 下 。 程 序 清单 13-2 定义 了 对 应 Web 应 用 的 web. xml 的 部 分 代码 ,请 将 程序 清 
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单 13-2 ARH 1] — 


代码 4 


处 补充 完整 ,保存 在 WEB-INF 目录 下 然后 在 Tomcat 服务 器 


中 运行 该 Servlet, 并 记录 运行 结果 。 


程序 清单 13-1: 


//CounterServlet.java 


package Servlet; 


import javax.servlet. * ; 


import java.io. * 


public class CounterServlet extends GenericServlet { 


private static int counter=0; 
final static String f="/tmp/counter.tmp"; 


public void init () throws ServletException { 


try { 


FileInputStream 
InputStreamReader reader- new InputStreamReader (in); 
counter= Integer.parseInt (new BufferedReader (reader) .readLine () ) ; 


in.close(); 
) catch (IOException e) ( 
System.out.println (e.getMessage ()) ; 


in-new FileInputStream(f); 


public void destroy() { 


try ( 


FileOutputStream out- new FileOutputStream (f); 


PrintStream 


ps=new PrintStream (out) ; 


ps.printin (counter); 


out.close(); 
) catch (IOException e) {} 


super.destroy (); 


public void service (ServletRequest request, ServletResponse response) 


throws ServletException, IOException { 


PrintWriter out- response.getWriter () ; 


increaseCounter () ; 


response .setContentType ("text/html; charset- GB2312"); 


out.print ("<html> « body» ") ; 


out.println("«p align='center'>"); 
out.println(" 共 访问 "+ counters " WK"); 
out.println("« /p»"); 

out.println("« /body» ") ; 
out.println("« /html» ") ; 


. 239 « 


out.close(); 


synchronized void increaseCounter() ( 


counter+ +; 


} 
程序 清单 13-2 : 


<?xml version- "1.0" encoding- "gb2312"?» 

<!--web.xml--> 

« web- app xmlns= "http: //java.sun.com/xml/ns/j2ee" 
xmlns:xsi= "http://www.w3.org/2001/XMLSchema- instance" 
xsi:schemaLocation- "http: //java.sun.com/xml/ns/j2ee 

http://java.sun.com/xml/ns/j2ee/web-app 2 4.xsd" 
version="2.4"> 

<description> 计 算 访问 次 数 < /description> 


<servlet> 
< servlet- name» Counter« /servlet- name> 


< servlet- class» | {Rf 1| « /servlet- class» <!-- 请 设置 Servlet 类 --> 
< /servlet» 
代码 2 <!-- 请 配置 Servlet 映射 --> 
代码 3 <!-- 请 设置 Servlet 名 --> 
«url- pattern» /Counter< /url- pattern» 
[代码 本 <!-- 请 结束 servlet 映射 --> 
< /web- app» 


(2) 将 程序 清单 13-1 改写 成 HttpServlet 的 程序 CounterHttpServlet. java. f& fd UL FE 
序 清单 13-3 ,编译 该 程序 ,并 设置 对 应 的 web. xml。 和 运行 该 Servlet ,观察 并 记录 运行 结果 ， 
比较 该 运行 结果 与 CounterServlet 的 运行 结果 是 否 一 致 ” 如果 运行 结果 不 一 致 ,请 修改 程序 
CounterHttpServlet. java, 并 解释 CounterHttpServlet 运行 结果 与 上 述 的 CounterServlet 的 不 同 
的 原因 。 如 果 运 行 结果 一 致 ,请 分 别 解释 二 者 运行 的 工作 原理 。 

程序 清单 13-3: 


//CounterHttpServlet.java 
package Servlet; 

import javax.servlet.http. * ; 
import java.io. * ; 


public class CounterHttpServlet ( 
private static int counter=0; 
final static String f- "/tmp/counter.tmp"; 
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public void doPost (HttpServletRequest req, HttpServletResponse res) { 
tryt 
FileInputStream in=new FileInputStream(f); 
InputStreamReader reader- new InputStreamReader (in); 


counter- Integer.parseInt (new BufferedReader (reader) .readLine ()) ; 


in.close(); 

PrintWriter out=res.getWriter (); 

counter+ + ; 

res.setContentType ("text/html; charset- GB2312"); 
out.print ("« html» « body» ") ; 

out.println("«p align= 'center'>"); 

out .print1n ("Jt jj [3] "+ counter "IX ") ; 

String str- "Bh c"; 

out.println (new String (str.getBytes ("ISO- 8859- 1") , "gb2312")) ; 
out.println("« /p»"); 

out.println("« /body» "); 

out.println("« /html» "); 


out.close(); 


FileOutputStream output- new FileOutputStream (f); 
PrintStream ps=new PrintStream (output); 
ps.print1n (counter); 
out.close(); 
) catch (IOException e) ( 
System.out.println (e.getMessage ()) ; 


public void doGet (HttpServletRequest req,HttpServletResponse res)( 
doPost (req, res) ; 


) 
练习 2: 用 HttpServlet 实现 客户 端的 表单 数据 。 


已 知 有 resume. jsp 文件 提供 了 设置 个 人 简历 的 简单 表单 , 见 程序 清单 13-4。 请 将 程序 


清单 13-5 的 ResumeServlet. java I | RH 1| — 1R 3 | [CREE 1] ~| (RAG EE 2 


整 ,实现 显示 用 户 的 个 人 简历 信息 。 运 行 结果 如 图 13-3 和 图 13-4 所 示 。 
程序 清单 13-4: 


«!--resume.jsp--» 


处 补充 完 


<% 6 page contentType= "text/html; charset=gb2312" language- "java" import- "java.sql. * "%> 
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设置 个 人 简历 
个 人 信息 | 


| 姓 Eme 
lt 8h OB Ok 
“HAE FEBR -[[o90%-10 8-01 
BTL : Been iri 
(E — 3&:[D10-29999959 
| 二 ER 


教育 背景 


毕业 学 校 ， (ARE 
PEL 
(= ap. [ips 
[dci 
| | 计算 机 软件 的 开发 和 网 络 应 用 ^ 


求职 意向 


BLIP: @ 全 职 OUR 
| 期望 工 作 职位 ，[ 欧 件 工程 师 
aTe. mr 
RETER: (ari 


图 13-3 设置 个 人 简历 


TO) REO FFV KEN IAT) WHW 2 


O~- O- BAG Px tee OS a -@ 
Hn 


st: B080/ chapter 13/RevuneServLet 


个 人 信息 


mee. 黄海 

性 别 : 男 

出 生日 期 ，1990 年 -10 月 -01 日 
通讯 地 址 ， 北 京 市 111 信 箱 
电话 ，010-99999999 


教育 背景 


APH. RA 

学 位 ， 硕 和 
fusum 
计算 机 软件 开发 和 网 结 应 用 . 
求职 意向 

软件 工程 师 ， 全 

hs 


H 
作 地 点 ， 南 京 市 
FK: 


图 13-4 显示 设置 后 的 个 人 简历 


< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 
"http: //www.wW3.org/TR/xhtmll/DTD/xhtmll- transitional .dtd"> 
«html xmins- "http: //www.w3.0rg/1999/xhtml"» 
«head» 
«meta http- equiv- "Content- Type" content- "text/html; charset=gb2312"/> 
<title> 定 制 个 人 简历 < /title> 
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< /head» 


<body> 

< fieldset> 

«legend» i H^ A fill Jj < /1egend» 

« form method- "post" action= "ResumeServlet"> 
<h3> 个 人 信息 </h3><!-- 定 义 个 人 信息 --> 
tE &nbsp; &nbsp; &nbsp; &nbsp; 4 : 
«input type="text" name- "user name" maxlength- "30"/» &nbsp; 
<br/> 
性 &nbsp; &nbsp; &nbsp; &nbsp; Jil : 
«input type="radio" name- "user gender" value=" 男 "/> 男 &nbsp; 
«input type="radio" name- "user gender" value- "4p "/» fr 
<br/> 
出 生日 期 : 
«input type="text" name- "user birth" value="1990 年 -01 月 -01 A" /><br/> 
通讯 地 址 : 
«input type="text" name- "user addr" maxlength="30"/><br/> 
电 &nbsp; &nbsp; &nbsp; &nbsp; iff : 
«input type="text" name- "user tele" maxlength- "30"/><br/> 
E&nbsp; - &nbsp;mail: 
«input type="text" name- "user emname" maxlength- "30"/» 8 


«input type="text" name- "user emdns" maxlength- "20"/» 


«n3» & FF 11 Sit < /n3» 
<!-- 定 义 教 育 背景 --> 
毕业 学 校 : 
«input type- "text" name- "edu school" maxlength- "40"/><br/> 
学 &nbsp; &nbsp; &nbsp; &nbsp; Jj : 
<select name= "edu degree"? 
«option value=" 中 专 "> 中 专 < /option» 
«option value- "大专 "> 大 专 < /option> 
<option value=" 本 科 "> 本 科 < /option> 
«option value= "硕士 "> 硕士 < /option» 
<option value= "博士 "> 博士 < /option» 
</select> 
<br/> 
专 gnbsp; &nbsp; &nbsp; &nbsp; Il. : 
«input type="text" name- "edu major"/» «br/» 
专业 描述 : <br/> 
< textarea name= "edu des" rows="6" cols="30"> 
< /textarea» 
<br/> 


<h3> 求 职 意 向 < /h3> 
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期 望 工作 性 质 : 
«input type="radio" name- "job type" value- "全 职 "/> 全 职 
«input type="radio" name- "job type" value= "JE Bi" /» 3f RH. 
<br/> 
期 望 工作 职位 : 
«input type="text" name= "job"/» 
<br/> 
期 望 工作 地 点 : 
«input type="text" name= "job place"/» 
<br/> 
期 待 工作 报酬 : 
«input type- "text" name= "job salary"/» 
<br/> 
«input type="submit" value= "确认 "/> 
</form> 
< /body> 
</html> 


程序 清单 13-5: 


//ResumeServlet.java 
package Servlet; 
import javax.servlet.http. * ; 


import javax.servlet.* ; 


import java.io.* ; 
import java.util. * ; 
public class ResumeServlet extends HttpServlet ( 
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String user name; // 用 户 姓名 
String user gender; // 用 户 性 别 
String user birth; // 用 户 出 生日 期 
String user addr; // 用 户 的 地 址 
String user tele; // 用 户 的 电话 


String user email; 


String edu school; 
String edu degree; 
String edu major; 
String edu des; 


String job type; 
String job; 

String job place; 
String job salary; 


// 用 户 的 E-mail; 


// 毕 业 学 校 
// 学 位 
// 专 业 
// 专 业 描述 


// 工 作 性 质 
// 工 作 

// 工 作 地 点 
// 期 望 工资 


public void doPost (| {€# 1| , [R5 2|) throws | (EHS 3|, IOException { // 请 补充 代码 


request.setCharacterEncoding ("GB2312") ; 


response.setContentType ("text/html; charset- GB2312") ; 


PrintWriter out- response.getWriter(); 


setPersonalInfo (request); // 设 置 个 人 信息 
setEduInfo (request); // 设 置 教育 背景 信息 
setJobInfo (request) ; // 设 置 期 望 工作 信息 
if(user name.equals("")) 

displayError (out); 
else 

displayResume (out) ; 


public void displayResume (PrintWriter out)( 
// 和 输出 定制 后 的 简历 
out.println("«html»"); 
out .print1n ("<head>") ; 
out.println("« link rel= 'stylesheet' type= 'text/css' href= 'style.css' />"); 
out.println("« /head> ") ; 
out .print1n ("<body>") ; 
displayPersonInfo (out) ; 
displayEduInfo (out) ; 
displayJobInfo (out); 
out.println("« /body> < /html» ") ; 
) 


public void displayError (PrintWriter out) { 

// 显 示 简 历 信息 错误 

out.println("«html»"); 
out .printl1n ("<head>") ; 
out.println("« link rel= 'stylesheet' type= 'text/css' href= 'style.css' />"); 
out.println("« /head» ") ; 

out .print1n ("<body>"); 

out.println ("请 输入 正确 信息 "); 

out.println("« /body> < /html> "); 

I 


public void setPersonalInfo (HttpServletRequest request) { 
// 设 置 个 人 信息 
user name- request .getParameter ("user name"); 
user gender- request.getParameter ("user gender"); 
user birth-request.getParameter ("user birth"); 
user_addr= request .getParameter ("user addr"); 
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user tele-request.getParameter ("user tele"); 
String emaill- request .getParameter ("user emname"); 
String email2= request .getParameter ("user emdns"); 
if (user name--null) user name-""; 

if (user gender--null)user gender-""; 

if(user birth--null) user birth-""; 

if(user addr--null)user addr- "X"; 

if (user tele--null)user tele- "X"; 


if(emaill--null|| email2-- null) user email- "X"; 


public void displayPersonInfo (PrintWriter out) { 
// 输 出 个 人 信息 
代码 段 1 // 请 补充 代码 段 


public void setEduInfo (HttpServletRequest request) { 
// 定 制 教育 背景 
edu_school= request .getParameter ("edu school"); 
edu_degree= request .getParameter ("edu_degree") ; 
edu_major= request .getParameter ("edu major"); 
edu_des= request .getParameter ("edu_des") ; 
if (edu school--null)edu school- "X"; 
if(edu degree--null)edu degree-" 


if (edu major--null) edu major-""; 
if (edu des--null)edu des- "X"; 


public void displayEduInfo (PrintWriter out) ( // 输 出 教育 背景 
代码 段 2 // 请 补充 代码 段 


public void setJobInfo (HttpServletRequest request) { 
// 设 置 期 望 工作 信息 
job type= request .getParameter ("job type"); 
job- request .getParameter ("job") ; 
job place- request .getParameter ("job place"); 
job salary-request.getParameter ("job salary"); 
if(job type--null)job type-""; 
if(job--null)job-" 


if(job place--null) job place-""; 
if(job salary--null)job salary- "面谈 "; 


public void displayJobInfo (PrintWriter out) { 


// 显 示 期 望 工作 信息 
代码 段 3 // 请 补充 代码 段 
) 
) 
请 将 补充 代码 后 的 程序 编译 ,并 配置 对 应 Web 应 用 的 web. xml, 然 后 启动 Tomcat 6. 0, 并 


运行 resume. jsp 和 ResumeServlet。 观 察 运 行 结果 。 如 果 将 程序 清单 13-3 的 resume. jsp 
发 送 表单 的 方式 改写 成 get, 再 运行 上 述 两 个 程序 ,观察 运行 结果 ,会 发 生 什么 变化 ?如果 
有 变化 ,请 解释 原因 。 


13.3 实验 13.2 JSP 的 两 种 开发 模式 


实验 目的 : 


CD 深入 了 解 JSP 的 两 种 开发 模式 JavaBean 十 JSP 和 JavaBean 十 Servlet 十 JSP。 
(2) 比较 JavaBean 十 JSP 和 JavaBean+Servlet+JSP 的 异同 。 
(3) 利用 这 两 种 开发 模式 的 特点 ,熟练 开发 具有 实际 意义 的 Web 应 用 。 


实验 内 容 : 


本 次 实验 的 内 容 类 似 于 第 12 章 的 第 12. 3 节 。 也 是 模仿 ForumLite 2. 1 的 结构 ,用 JSP 
的 第 二 种 开发 模式 JavaBean 十 Servlet 十 JSP 开发 一 个 具有 最 基本 功能 的 简易 论坛 。 功 能 要 
R: 此 系统 要 实现 允许 用 户 浏览 论坛 ,发表 新 论点 ,也 可 以 浏览 并 回复 论坛 的 已 有 论点 。 论 
坛 中 所 有 的 数据 信息 用 MySQL 数据 库 保存 。 具 体 功 能 要 求 如 下 : 

(1) 任何 用 户 可 以 直接 发 表 论题 ,论题 包括 标题 内容、 发 表 者 的 电子 邮件 及 发 表 日 期 ; 
如 果 有 用 户 对 该 论题 回复 ,要 求 能 显示 已 回复 论题 的 次 数 。 

(2) 任何 用 户 可 以 浏览 已 发 表 的 论题 ,并 可 以 针对 特定 的 论题 进行 回复 。 回 复 信息 包 
括 标题 内容、 回复 者 的 电子 邮件 以 及 回复 的 时 间 。 

(3) 要 求 所 有 论题 的 以 分 页 的 形式 显示 ,每 页 面 10 个 论题 。 

(4) 要 求 某 论题 的 所 有 回复 也 以 分 页 显示 ,每 页 面 10 个 回复 。 


实验 步骤 : 


按照 实验 内 容 提 出 的 基本 要 求 ,请 自行 进行 系统 设计 、 数 据 库 设计 ,并 采用 JavaBean 十 
Servlet 十 JSP 工作 模式 二 的 方式 ,编写 相应 的 程序 实现 简易 论坛 。 使 论坛 的 运行 结果 类 似 
图 13-5 — B] 13-8 所 示 。 

问题 : 请 说 出 JSP 十 JavaBean 模式 与 JSP 十 JavaBean 十 Servlet 模式 下 承担 业务 逻辑 处 
理 各 是 由 哪 种 技术 来 承担 。 比 较 你 用 这 两 种 模式 开发 实现 简易 论坛 的 特点 ,并 说 明 哪 种 模 
式 更 加 适应 简易 论坛 的 开发 ,请 说 明 你 的 理由 。 
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2007-05- 


17-05- 


图 13-5 ”分 页 显示 论题 


rita_cliff@yahoo.com 


Ammy Huannn 
ammy@sina.com 


图 13-6 发表 论题 界面 
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13.4 实验 13.3 Servlet 动态 生成 图 像 


实验 目的 : 


354: 


图 13-7 分 页 显示 特定 论题 的 界面 


图 13-8 显示 回复 论题 的 界面 


(1) 了 解 Servlet 技术 在 处 理 图 形 的 应 用 。 


(2) 初步 了 解 


G) RAT HER 


Servlet 动态 生成 图 像 验证 码 的 原理 。 
运用 Servlet 技术 解决 实际 问题 。 
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实验 内 容 : 


(1) 用 Servlet 生成 图 片 。 要 求 : 用 Servlet 绘制 一 个 简单 图 形 。 
(2) 制作 一 个 Servlet 来 绘制 某 小 学 某 学 期 六 个 年 级 男女 学 生 数学 平均 成 绩 的 比较 柱 


状 图 。 
(3) 用 Servlet 动态 生成 图 像 验 证 码 。 
实验 步骤 : 


练习 1: 用 Servlet 生成 图 片 。 

本 次 练习 的 主要 目的 是 了 解 Servlet 绘制 图 形 的 主要 过 程 。 具 体 要 求 : 下 列 程序 清 
Tf. 13-6 中 是 ImageServlet. java 的 代码 .请 阅读 该 程序 ,了 解 该 Servlet 程序 的 主要 功能 ,并 
分 析 它 的 运行 结果 是 什么 ? 然后 编译 该 Servlet 程序 ,部 署 并 在 Tomcat 6. 0 中 运行 该 
Servlet, 记 录 运 行 结 果 , 观 察 运 行 结果 是 否 与 你 分 析 的 结果 是 否 一 致 ,并 记录 Servlet 绘制 图 
形 的 主要 流程 。 

程序 清单 13-6. 


//ImageServlet .java 

package myimage; 

import javax.servlet.* ; 

import javax.servlet.http. * ; 

import java.io. * ; 

import java.awt.* ; 

import java.awt.image. * ; 

import com.sun.image.codec. jpeg. * ; 

public class ImageServlet extends HttpServlet { 


public void doGet (HttpServletRequest req, HttpServletResponse res) 
throws ServletException, IOException { 
doPost (req, res) ; 


public void doPost (HttpServletRequest req, HttpServletResponse res) 
throws ServletException, IOException 


BufferedImage image- new BufferedImage (100,100, BufferedImage.TYPE INT RGB); 
// 绘 制图 形 

Graphics g= image.getGraphics () 7 

g.setColor (Color.blue); 

g.fillRect (25,25,50,50); 

// 绘 制 填充 和 矩形 

// 创 建 图 形 并 输出 

res.setContentType ("image/jpeg") ; 

JPEGImageEncoder encoder- JPEGCodec.createJPEGEncoder (res .getOutputsStream()); 
encoder .encode (image) ; 
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) 

) 

练习 2: Servlet 绘制 柱状 图 。 

已 知 有 一 个 MySQL 数据 库 StudentDB, 在 StudentDB 中 有 数据 表 math, 具 体 表 的 结 
构 和 数据 见 图 13-9, 其 中 grade id 表示 编号 ,grade 表示 年 级 ,gender 表示 性 别 ,score 表示 
数学 成 绩 。 有 MathServlet. java 代码 见 程序 清单 13-7, 它 可 以 访问 数据 表 math, 比 较 并 制 
作 不 同年 级 的 男女 学 生 的 数学 成 绩 的 统计 柱状 图 。 


FA 13-9 MySQL 下 数据 表 math 的 所 有 记录 


仔细 阅读 MathServlet. java. 了 解 程序 代码 的 作用 ,将 程序 清单 13-7 中 | 代码 了 一 


代码 种 处 的 空白 ,补充 完整 并 解释 4 处 的 作用 ,实现 对 数据 表 的 访问 和 统计 ,并 将 统计 结果 
通过 统计 柱状 图 表示 出 来 ,使 运行 结果 如 图 13-10 所 示 


Dm 
Norton” @ 


8060/ chapter13/MathServiet 


图 13-10 ”统计 柱状 图 


程序 清单 13-7 : 


//MathServlet.java 

package Servlet; 

import javax.servlet. * ; 

import javax.servlet.http. * ; 

import java.io. * ; 

import java.awt. * ; 

import java.awt.image. * ; 

import com.sun.image.codec.jpeg. * ; 

import java.sql. * ; 

public class MathServlet extends HttpServlet{ 


*x* 

x 该 程序 绘制 6 个 年 级 按 性 别 区 分 的 数学 成 绩 统计 表 

**/ 

static int[] []grade- new int[6] [2]; 

public void doGet (HttpServletRequest req, HttpServletResponse res) 
throws ServletException, IOException ( 
doPost (req, res) ; 


public void doPost (HttpServletRequest req, HttpServletResponse res) 
throws ServletException, IOException { 
res.setCharacterEncoding ("GB2312") ; 
tryt 
getDataFromTable () ; 
}catch (SQLException e) { 


e.printStackTrace () ; 


BufferedImage image- new BufferedImage (600,500, BufferedImage.TYPE INT RGB); 

// 创 建 绘图 区 

Graphics g= image.getGraphics (); 

g.setColor (Color.black) ; 

g.fillRect (0,0, 600,500); 

g.setColor (Color.WHITE) ; 

g.drawLine (20, 20, 20, 300) ; 

for (int i-1;i«10;i-4)( 

// 绘 制 y 轴 
g.drawLine(20,300- i * 10,20+ 5,300- i * 10); 
g.drawString(""+ (i* 10), 0, 300- i* 10); 

} 

for (int i=1;i<7;i++){ 

// 绘 制 x 轴 
g.drawLine (80 * 1,300,80 * 1,305); 
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g.drawString (" 第 "+ i+ "4E ", 10+ 80 * 1,310); 
} 
g.drawLine (15,25,20,20) ; 
g.drawLine (20, 20, 25, 25); 
// 绘 制 箭头 
g.drawLine(20, 300, 550, 300); 


g.drawLine (545, 295, 550, 300) ; 
g.drawLine (550, 300, 545, 305); 
g.setColor (Color.yellow); 
g.drawString("y:J Sfi", 25, 10); 
g.drawString ("x: 年 级 (ZI.—» 4x , lk - » 91 ) ", 460, 330) ; 
for (int i=0;i< 6;i++){ 
for (int j=0;j<=1;j++){ 
if (j==0) g.setColor (Color.blue) ; 
else g.setColor (Color.red) ; 


g.fillRect(80* (i+1)+20* (j==0?-1:0), 300-grade[i] [j], 20, 


} 
g.setColor (Color.white) ; 
g.drawString ("数学 成 绩 统计 表 dü lE BH)", 240, 350) ; 


res. R 1|; 


JPEGImageEncoder encoder=| [Ri 2| ; 


encoder.encode (image) ; 


public void getDataFromTable ()throws SQLException( 
try{ 
Class.forName ("| 代码 "3|") .newInstance 0 ; 


Connection con- java.sql .DriverManager .getConnection (| 


代码 4 


Statement stmt- con.createStatement () ; 
ResultSet rs- stmt.executeQuery ("select * from math"); 
int gr,ge; 

/ /gx 表示 年 级 ,ge 表示 性 别 

ge=0; 

gr-0; 

while (rs.next ()) { 

// 将 各 年 级 男女 学 生 的 平均 分 保存 在 数组 中 
grade [ge] [gr]=rs.getInt ("score"); 
gr- (gr* 1)$2; 
if (gr==0) 


gett; 


if(ge»5) throw new SQLException ("警告 ! 出现 严重 错误 !"); 


$ 
}catch (Exception el) { 


grade [i] [j]); 


// 补 充 代码 
// 补 充 代码 


// 补 充 代码 
// 补 充 代码 
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el.printStackTrace (); 


} 


练习 3. Servlet 动态 生成 图 像 验证 码 。 

在 网 站 填写 表单 ,例如 填写 登录 表单 ,往往 需要 填写 验证 码 。 验 证 码 是 随机 生成 的 字符 
B ,以 某 种 方式 保存 起 来 ,例如 保存 在 session 中 。 用 户 每 次 访问 网 站 ,都 需要 比较 验证 码 是 
否 一 致 。 验 证 码 的 出 现 , 有 效 地 防止 其 他 网 站 盗 链 资 源 。Servlet 技术 的 动态 生成 图 像 的 能 
力 , 为 生成 图 像 验证 码 的 验证 功能 的 实现 提供 了 保证 。 本 次 练习 的 要 求 如 下 。 

CD 已 知 程序 清单 13-8 定义 CheckCodeServlet. java ,请 将 程序 的 方法 createRandom() 
的 | 伐 码 段 | 补充 完整 ,使 得 createRandom() 方 法 实现 动态 生成 4 个 随机 字符 (字符 的 范围 是 
数字 0 一 9 ,大 小 写 26 个 英文 字母 )。 

程序 清单 13-8: 


//CheckCodeServlet .java 

package Servlet; 

import javax.servlet.* ; 

import javax.servlet.http. * ; 

import java.io.* ; 

import java.util. * ; 

import com.sun.image.codec. jpeg. * ; 

import java.awt. * ; 

import java.awt.image. * ; 

public class CheckCodeServlet extends HttpServlet { 

// 处 理 get 请 求 
Random r; 
// 定 义 随 机 对 象 

public void doGet (HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException ( 

response.setCharacterEncoding ("GB2312") ; 
response.setContentType ("image/jpeg"); 
// 必 须 设置 ContentType 为 image/jpeg 


response.setHeader ("Pragma", "no- cache"); 
// 禁 止 图 像 缓 存 
response.setHeader ("Cache- Control", "no- cache"); 


response.setDateHeader "Expires", 0); 


Date d- new Date(); 
long lseed-d.getTime(); 
// 利 用 时 间 生 成 随机 种 子 


r-new Random (lseed); 
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// 设 置 随机 种 子 


BufferedImage bi- new BufferedImage (60,32, BufferedImage. TYPE INT RGB); 
Graphics2D g=bi.createGraphics (); 
g.clearRect (0, 0, 60, 32); 
g.setColor (Color.WHITE.brighter ()); 
g.setFont (new Font ("Times New Roman", Font . PLAIN, 18) ); 
String codes=createRandom () ; // 生 成 随机 字符 
g.drawString (codes, 8, 20); 
HttpSession session= request.getSession(); 
// 将 验证 码 保存 在 session 中 
session.setAttribute ("codes", codes) ; 
try { 
// 使 用 JPEG 编码 ,输出 到 response 的 输出 流 
JPEGImageEncoder encoder- JPEGCodec.createJPEGEncoder (response. 
getOutputStream()); 
JPEGEncodeParam param- encoder.getDefaultJPEGEncodeParam (bi) ; 
param.setQuality(1.0f, false); 
encoder.setJPEGEncodeParam (param) ; 
encoder .encode (bi) ; 
) 
catch (Exception ex) { 
) 


public String createRandom()( 
// 获 取 随 机 编码 


代码 段 // 请 补充 代码 ,使 得 返回 的 4 位 随机 编码 由 数字 和 英文 字母 构成 


) 

(2) 编译 并 部 署 该 Servlet ,编写 对 应 的 web. xml 文件 ,设置 CheckCodeServlet。 请 写 
出 web. xml 的 代码 。 

(3) 将 部 署 后 的 Servlet 插入 到 登录 表单 中 ,代码 如 程序 清单 13-9 的 login. jsp, 请 将 
login. jsp 的 | 代码 了 处 补充 完整 ,使 之 运行 结果 如 图 13-11. 


t QD | 和 netp://Localhost :6080/chapter13/login. jsp E 
orto 


Reg. 
密码 名 ， 


注册 码 ， TIh? 
a (£X) 
图 13-11 Servlet 动态 生成 图 像 验 证 码 的 运行 结果 
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程序 清单 13-9: 


<!--login.jsp --> 
<%@page contentType- "text/html; charset=gb2312" language- "java" import="java.sql.* "%> 


< ! DOCTYPE html PUBLIC "- //W3C//DTD XHTML 1.0 Transitional//EN" 

"http: //www.w3.org/TR/xhtmll/DTD/xhtmll- transitional .dtd"> 

<html xmlns- "http://www.w3.0rg/1999/xhtml"» 

<head> 

«meta http- equiv= "Content- Type" content- "text/html; charset=gb2312"/> 
<title> 登 录 < /title» 

< /head» 


<body> 
<table> 
< form methi "post" action= "CheckServlet"> 
<tr><td> 用 户 名 : «/td» 
<td><input type="text" name- "username" />< /td> 
«td» &nbsp;« /td> 
</tr> 
<tr> 
<td> 密 码 名 : </td> 
<td><input type="password" name- "password" />< /td> 
«td» &nbsp;« /td> 
«tr» 
<td> 注 册 码 : </td> 
«td»«input type- "text" name- "code" />< /td> 
«td»«img [AN 1| width- "60" height- "40"/» « /td> <!-- 添 加 注册 码 图 片 --> 


<tr> 

«td» &nbsp;« /td» 

«td» 

«input type="submit" value- "发送 "/> 
«input type- "reset" value= "ift #i"/> 
</td> 

</form> 

</table> 

</body> 

</html> 


(4) 请 说 明 Servlet 编程 的 特点 ,比较 它 与 JavaBean 的 异同 。 
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$8148 JSP 和 XML 


在 第 5 章 介绍 XML 的 基本 语法 内 容 和 XML 在 客户 端的 相关 应 用 。 实 际 上 ,XML 
广泛 应 用 在 服务 器 端 ,是 服务 器 端的 技术 。JSP 5j XML 都 是 Sun 公司 的 J2EE 的 重要 组 
成 ,JSP 开发 服务 器 端 程序 具有 强大 的 优势 ,而 XML 在 数据 表达 和 系统 之 间 传 递 数据 具 
有 极 大 的 便利 ,二 者 的 结合 可 以 开发 出 功能 强大 的 Web 应 用 。 在 本 章 中 ,将 从 JSP 生成 
XML 文件 JSP 解析 XML 文件 以 及 JSP 的 自 定义 标签 等 方面 来 进一步 了 解 服务 器 端的 
开发 。 


14.1 预备 知识 


XML 是 一 种 具有 严格 语法 规则 的 良 构 性 语言 ,具有 良好 的 描述 数据 的 特点 。 它 是 一 
种 服务 器 端的 常见 技术 。JSP 有 3 种 方式 可 以 使 用 XML 数据 。 

(1) 直接 使 用 XML 文件 。 

(2) 利用 JavaBean 处 理 XML 数据 。 

(3) 利用 XML 实现 JSP 的 自 定义 标签 。 


14.1.1 JSP 直接 使 用 XML 文件 


JSP 使 用 XML 数据 ,又 有 以 下 几 种 情况 。 

1, JSP 要 直接 嵌入 XML 数据 .直接 生成 XML 文件 

需要 通过 二 % @ page% 二 指令 说 明文 件 的 内 容 的 类 型 , 即 指 定 page 指令 的 
content Type 的 属性 为 "text/xml”。 形 式 如 下 : 


< % @ page contentType- "text/xml"$ > 


然后 ,在 该 指令 后 面 , 直 接 嵌 入 XML 数据 。 通 过 这 种 方式 ,JSP 可 以 将 嵌入 的 XML 数 
据 生 成 XML 文件 。 方 便 客户 端 或 其 他 的 应 用 获取 对 应 的 XML 文件 。 在 JSP 中 直接 利用 
XSLT 实现 对 XML 数据 的 转换 ,达到 有 效 的 输出 。 或 在 JSP 中 通过 非 XSLT 方式 ,实现 对 
XML 数据 有 效 的 表示 或 转换 。 

2. JSP 使 用 XML 文件 

JSP 也 可 以 直接 使 用 XML 文件 ,利用 XML 数据 为 JSP 指定 具体 的 处 理 动作 。 在 执行 
这 样 的 功能 时 ,往往 需要 对 XML 数据 进行 解析 ,获取 有 效 的 输出 。JSP 可 以 利用 JAXP 
API 实现 对 XML 数据 的 解析 。 对 于 JAXP API 的 相关 介绍 见 配套 教材 的 第 14. 2. 1 节 
常见 用 于 Java 解析 XML 的 还 有 JDOM 和 DOM4J, 这 些 Java API 也 是 常见 用 于 解析 和 处 
理 XML 的 应 用 方式 。 

(D JDOM。JDOM 是 一 个 提供 基于 Java 语言 解决 XML 的 开放 源码 项 目 , 由 Brett 
McLaughlin fil Jason Hunter 开发 。 目 前 ,已 经 被 接纳 成 为 JSP-102 ,是 Java 规范 中 的 一 个 
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成 员 。JDOM 本 身 没 有 解析 器 , 它 的 一 个 特点 是 可 以 利用 DOM 或 SAX 来 解析 XML. JF He 
供 相 应 的 API, 多 使 用 Java 类 而 不 是 接口 实现 用 Java 处 理 XML 数据 。JDOM 的 优势 在 于 
它 可 以 很 好 的 与 Java 程序 结合 ,与 DOM 相 比 ,更 加 适应 Java 语言 开发 XML 应 用 。JDOM 
的 常见 的 包 见 表 14-1 ,常见 的 类 见 表 14-2. 


表 14-1 JDOM 的 常见 的 包 


包 描 述 
org. jdom 包含 了 所 有 的 XML 文档 要 素 的 java 类 


包含 了 与 实现 DOM 接口 的 java 类 

包含 了 XML 文档 的 过 滤器 类 
包含 了 创建 JDOM 文档 的 类 
包含 了 输出 JDOM 文档 的 类 

基于 JAXP TRaX 类 ,包含 了 实现 转换 的 类 
包含 支持 XPATH 的 类 


org. jdom. adapters 
org. jdom. filter 

org. jdom. input 

org. jdom. output 
org. jdom. transform 


org. jdom. xpath 


# 14-2 JDOM 的 常见 的 类 
定义 一 个 XML 属性 
定义 一 个 XML 文档 
定义 一 个 XML 元 素 
定义 一 个 XML 命名 空间 
定义 一 个 XML 的 文本 内 容 
父 结 点 合法 子 内容 JDOM 对 象 的 父 类 


org. jdom. Attribute 
org. jdom. Document 
org. jdom. Element 
org. jdom. Namespace 
org. jdom. Text 


org. jdom. Content 


org. jdom. 
org. jdom. 


org. jdom. 


org. jdom. 


transform. JDOMResult 
transform, JDOMSource 
input. DOMBuilder 


input, SAXBuilder 


表示 XSL 转换 结果 

表示 要 转换 的 数据 源 ,可 以 是 文档 .元素 或 结 点 集 

从 已 存在 org. w3c. dom. Document 创建 一 个 JDOM org. 
jdom. Document 文档 


从 文件 it URL 等 或 SAX 的 InputSource 实例 用 SAX 解析 
创建 的 JDOM 文档 


org. jdom. input. SAXHandler 支持 SAXBuilder 的 类 

org. jdom. output. DOMOutputter 将 org. jdom. Document 作为 org. w3c. dom. Document 输出 
org. jdom. output. Format 封装 DOMOutputter 的 输出 格式 

SAXOutputter 作为 SAX 2.0 事件 流 输 出 JDOM 文档 

XMLOutputter 作为 XML 字 节 流 输出 JDOM 文档 


(2) DOM4J。DOM4J 是 一 个 开发 源 代码 ,是 JDOM 的 一 个 智能 分 支 , 使 用 Java 集合 


框架 支持 DOM SAX 和 JAXP, 是 集成 处 理 XML,XPATH 和 XSLT 的 Java 平台 。 是 一 个 
非常 优秀 的 Java XML API, 可 以 处 理 大 文档 和 流 化 文档 。DOM4J 的 常见 的 包 见 表 14-3, 
常见 的 类 和 接口 见 表 14-4。 

JSP 可 以 使 用 上 述 4 种 解析 XML 的 API。 但 是 在 JSP 直接 使 用 XML 数据 存在 一 个 
问题 ,就 是 Java 代码 与 JSP 表示 的 数据 无 法 分 离 ,导致 JSP 程序 的 可 读 性 差 。 在 这 样 的 情 
OLE ,可 以 通过 JavaBean 实现 对 XML 文件 的 应 用 。 


* 298 * 


#143 DOM4J 常见 的 包 


包 说 明 
org. dom4j 提供 定义 XML 文档 对 象 模型 的 类 和 接口 
org. dom4j. io 提供 将 DOMAJ 对 象 作 为 文本 流 输入 输出 DOM 或 SAX 的 类 和 接口 
org. dom4j. util 提供 DOM4J API 的 实用 类 
org. dom4j. rule 提供 实现 XSLT 处 理 的 类 和 接口 
org. dom4j. bean 用 于 JavaBean 检索 和 储存 数据 的 类 和 接口 
org. dom4j. datatype 提供 支持 XML Schema 的 类 和 接口 
org. dom4j. dom 提供 支持 W3C 对 象 模型 的 类 和 接口 
org. dom4j. swing 集成 Swing 中 的 TreeModel 和 TableModel 的 适配器 集合 
org. dom4j. dtd 表示 DTD 的 类 和 接口 
org. dom4j. xpath 处 理 XPATH 的 类 和 接口 


表 14-4 DOM4J 常见 的 类 和 接口 


类 /接口 说 明 
org. dom4j. Attribute 定义 一 个 XML 属性 
org. dom4j. Document 定义 一 个 XML 文档 
org. dom4j. Element 定义 一 个 XML 元 素 
org. dom4j. ElementHandler 定义 一 个 XML 元 素 处 理 器 
org. dom4j. Node 定义 一 个 结 点 
org. dom4j. Text 定义 文本 结 点 
org. dom4j. Xpath 定义 一 个 XPath 表达 式 
org. dom4j. io. DOMReader 定义 浏览 DOM 树 并 创建 DOMAJ 树 
org. dom4j. io. DOMWriter 定义 将 DOM4J 树 作 为 W3C 的 DOM 输出 
org. dom4j. io. SAXReader 定义 从 SAX 解析 事件 创建 DOMAJ 树 
org. dom4j. io. SAXWriter 定义 将 DOMAJ 树 作为 SAX 内 容 处 理 器 


14.1.2 JavaBean 处 理 XML 数据 


JavaBean 是 可 重用 的 组 件 , 具 有 强大 而 灵活 的 功能 。 在 JSP 中 ,往往 利用 JavaBean 封 
装 对 XML 数据 处 理 相 关 的 业务 逻辑 。JSP 既 可 以 用 JavaBean 动态 生成 XML 文件 ,也 可 
以 通过 JavaBean 结合 JAXP API 实现 对 XML 的 解析 ,获取 XML 文件 中 的 数据 ,执行 相应 
的 指令 动作 。JavaBean 有 效 地 克服 了 JSP 直接 使 用 和 处 理 XML 文件 中 的 不 足 , 有 效 地 体 
IT JSP 页 面 和 Java 代码 分 离 的 原则 ,是 一 种 常见 处 理 和 应 用 XML 的 技术 。 

JavaBean 处 理 XML 数据 ,JSP 中 可 以 通过 一 jsp:useBean 过 动作 实现 对 JavaBean 的 应 
用 。 通 过 二 jsp:setProperty 之 实现 对 JavaBean 相关 数据 处 理 , 以 及 用 所 jsp:getProperty 过 
实现 对 相关 数据 的 获取 。 


14.1.3 JSP 的 自 定义 标签 


JSP 的 自 定 义 标签 是 提供 实现 ISP 页 面 与 Java 代码 分 离 的 又 一 处 理 方法 。 用 户 自 定 
义 标 签 允 许 用 户 自 定 义 基 于 XML 的 标签 。 具 体 的 步骤 如 下 。 
CD 编写 处 理 标 签 的 Java 类 。 处 理 标 签 的 Java 类 必须 扩展 javax. servlet. jsp. 
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TagSupport 3k javax. servlet. jsp. Body TagSupport 类 。 

javax. servlet. jsp. TagSupport fil javax. servlet. jsp. Body TagSupport 类 的 主要 方法 分 
别 见 表 14-5 和 表 14-6。 处 理 标 签 的 Java 类 从 本 质 上 是 编写 处 理 XML 标签 的 JavaBean 组 
件 类 。 所 以 ,JSP 的 自 定 义 标签 是 一 种 特殊 的 JavaBean, 


表 14-5 javax. servlet. jsp. TagSupport 的 方法 


方 法 说 明 
int doAfterBody() 默认 处 理 标签 主体 
int doStartBody() 默认 处 理 自 定义 标签 的 开始 标志 ,返回 SKIP BODY. 
int doEndTag() 默认 处 理 自 定义 标签 的 结束 标志 ,返回 EVAL_PAGE. 
Tag getParent() 返回 封闭 标签 的 上 级 标签 
void setParent(Tag) 设置 封闭 标签 的 上 级 标签 
void setPageContext(PageContext) 设置 PageContext 对 象 ,在 doStartTag() 调 用 之 前 调用 
Object getValueCString) 获取 参数 对 应 的 值 
void set Value( String, Object) 设置 名 字 - 值 对 


表 14-6 javax. servlet. jsp. BodyTagSupport 的 方法 


方 法 说 明 
int doAfterBody() 标签 主体 后 执行 
int doStartTag() 默认 处 理 自 定义 标签 的 开始 标志 ,返回 SKIP_BODY 
int doEndTag() 默认 处 理 自 定 义 标签 的 结尾 标志 ,返回 EVAL_PAGE 
void doInitBody() 准备 评估 标签 主体 
BodyContent getBodyContent() 获取 当前 标签 主体 内 容 
void setBodyContent() 准备 评估 标签 的 实体 
void release() 释放 状态 


(2) 创建 描述 标签 库 的 文件 。 标 签 库 描述 文件 是 一 种 描述 标签 库 的 XML 文件 ,但 是 它 
的 文件 扩展 名 必须 为 .tld。 其 中 ,描述 标签 库 的 文件 中 用 特定 含义 的 标签 , 具体 内 容 见 
表 14-7。 


表 14-7 描述 标签 库 的 元 素 


标 记 说 明 标 id 说 明 
taglib 定义 标签 库 name 指定 标签 的 名 ,或 标签 属性 名 
tlib-version 定义 标签 库 的 版 本 tag-class 指定 标签 对 应 的 处 理 类 
jsp-version 指定 JSP 的 版 本 body-content | 定义 标签 的 主体 内 容 
shortname 指定 标签 库 的 默认 前 组 attribute 是 tag 的 下 级 标签 ,定义 标签 元 素 
uri 设置 标签 库 的 唯一 访问 标识 符 的 属性 
info 定义 标签 库 的 说 明 信 息 required 定义 属性 是 否 必 须 
tag 定义 标签 rtexprvalue 指定 属性 是 否 是 request- time 表示 式 


(3) 在 JSP 文件 中 应 用 标签 。 在 JSP 文件 要 应 用 自 定义 标签 ,首先 要 声明 对 标签 库 的 
引用 。 具 体 做 法 如 下 : 
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«$8 taglib uri- "标签 库 的 唯一 访问 标识 符 " pre£ix-"5| Hbi SE FE B ATR" %> 


然后 ,在 通过 上 述 taglib 指令 prefix 属性 指定 的 标签 库 的 前 组 名 来 访问 标签 ,具体 形式 
AF: 


< 前 级 名 : 标签 名 [属性 名 =" 属 性 值 "…]> 
14.2 实验 14.1 JSP 生成 XML 


实验 目的 : 


CD 了 解 JSP 直接 生成 XML 的 方法 。 
(2) 了 解 利用 JavaBean 生成 XML 的 方法 。 
(3) 了 解 JSP 生成 XML 的 作用 。 


实验 内 容 : 


CD 在 JSP 文件 中 将 给 定 的 XML 数据 段 直接 生成 XML 文件 。 
(2) JSP 利用 JavaBean 生成 XML 文件 。 要求 将 某 班级 的 “计算 机 基础 "的 成 绩 生 成 
XML 文件 保留 下 来 。 


实验 步骤 : 


5&2] 1; JSP 直接 生成 XML 文件 。 

程序 medalist. jsp, 是 可 以 输出 29 届 奥 运 排名 前 5 位 的 总 奖牌 榜 。 见 程序 清单 14-1。 
要 求 : 

(1) 仔细 阅读 程序 清单 14-1, 要 求 修改 该 程序 ,使 之 能 用 浏览 器 运行 可 以 正常 输出 的 
XML 文件 ,运行 结果 类 似 图 14-1。 

程序 清单 14-1: 


«!--medalist.jsp--» 


«$ @ page contentType- "text/xml" %> 
<?xml version- "1.0" encoding- "UTF- 8"?> 


«medalist» 
«nation» 
«name» H} [8] < /name» 
«rank» 1< /rank> 
«total medal» 100< /total medal» 
«gold medal» 51< /gold medal» 
«silver medal» 21« /silver medal» 
Xbronze medal» 28< /bronze medal» 


< /nation» 
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hspterl4/medalist. jsp — Nicrosof 


文件 于 编辑 ( REA TAG) Aw 
Or - O- DAO) lx 4 62-2 B-LOHS 


|l ttr: //1ocalhost:8082/chapter! 4/nedalist. isp 国 


XI medalist.jsp -> 
<?xml version" 1.0" encoding -"UTF-8* ?> 
- <medalist> 
- «nation? 
<name> 中 国 </name> 
<rank>1</rank> 
<total_medal>100</total_medal> 
<gold_medal>51</gold_medal> 
<silver_medal>24</silver_medal> 
<bronze_medal>28</bronze_medal> 
</nation> 
- <nation> 
<name> Xll -/name» 
<rank>2</rank> 
<total_medal>110</total_medal> 
<gold_medal>36</gold_medal> 
<silver_medal>38</silver_medal> 
<bronze_medal>36</bronze_medal> 
</nation> 
- Snation> 
<name> 俄 罗斯 </name> 
<rank>3</rank> 
<total_medal>72</total_medal> 


(ae 
图 14-1 直接 生成 XML 文件 


<nation> 

<name> 美 国 < /name> 

«rank» 2< /rank> 

«total medal» 110< /total medal» 

« gold medal» 36< /gold medal» 
«silver medal» 38< /silver medal» 
Xbronze medal» 36< /bronze medal» 

< /nation» 


«nation» 
<name> 俄 罗斯 < /name> 
«rank» 3< /rank> 
«total medal> 72< /total medal> 
« gold medal> 23< /gold medal» 
<silver medal>21< /silver medal> 
<bronze medal> 28< /bronze medal> 


< /nation» 


<nation> 
<name> 英 国 < /name> 
«rank» 4< /rank> 
<total medal> 41< /total medal> 
«gold medal» 19< /gold medal» 
«silver medal» 13« /silver medal» 
Xbronze medal» 15< /bronze medal» 
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< /nation» 


File Edit View Tools 


<nation> 
Help 
<name> f£ [8 < /name> 
< rank» 5< /rank> 
<total_medal> 41< /total_medal> Ii 奥运 奖牌 榜 
= a 国家 金 银 铀 
<gold medal> 16< /gold medal» 中 国 512128 
E re 美国 363836 
«silver medal» 10« /silver medal» TT 232128 
ni on 191315 
<bronze_medal> 15< /bronze_medal> 德国 161015 
< /nation> 
< /medalist> 


(2) 将 上 述 程序 清单 14-1 保存 为 medalist2. jsp. 
要 求 : 在 medalist2. jsp 中 调用 外 部 标签 库 实 现 XSLT 
的 转换 ,已 知 为 medalist2. jsp 中 的 XML 数据 设计 的 
XSLT X fF Jy medalist2. xslt, 代码 见 程序 清单 14-2。 
请 修改 后 的 medalist2. jsp, 将 同样 的 XML 数据 直接 生 
成 为 XHTML MP 文件 ,使 之 输出 结果 如 图 14-2. 

程序 清单 14-2: 


图 14-2 ”生成 XHTML MP 类 型 文件 


<?xml version- "1.0" encoding= "gb2312"?» 

«!--medalist2.xslt--» 

«xsl:stylesheet version- "1.0" xmlns:xsl- "http: //www.w3.org/1999/XSL/Transform"> 
<xsl:output method= "xml" version- "1.0" encoding- "gb2312" indent="yes"/> 


<xsl:template match="/"> 
«html xmins- "http: //www.w3.org/1999/xhtm1"> 
<head> 
«meta http- equiv= "Content- Type" content= "text/html; charset=gb2312" /> 
<title> 奥 运 奖牌 榜 < /title> 
</head> 


<body> 
<table> 
E e 
<th> 国 家 < /th> 
<th> 金 </th> 
<th> 银 < /th> 
<th> 铜 < /th> 
</tr> 
<xsl:for-each select= "medalist/nation" > 
«tr» 
«td»«xsl:value- of select- "name"/>< /td> 
«td»«xsl:value- of select- "gold medal"/»« /td> 
«td»«xsl:value- of select- "silver medal"/»«/td» 


* 263 * 


«td»«xsl:value-of select- "bronze medal"/»« /td> 
</tr> 
< /xsl:for- each» 
</table> 
< /body» 
</html> 
</xsl:template> 


< /xsl:stylesheet» 


练习 2: 利用 JavaBean 生成 XML 文件 。 

已 知 MySQL 中 有 一 数据 库 StudentDB ,该 数据 库 的 computer Table 数据 表 ( 结 构 和 数 
据 见 图 14-3) 中 保存 2007 级 化 学 专业 的 “计算 机 基础 ?的 总 评 成 绩 。 已 有 一 个 JavaBean 类 
ScoreBean. java( 代 码 见 程序 清单 14-3) 和 ScoreHandleBean. java( 代 码 见 程序 清单 14-4) ,其 
中 ScoreBean 保存 单个 学 生 总 评 成 绩 相 关 的 方法 ,而 ScoreHandleBean 定义 了 处 理 从 数据 
VE StudentDB 中 获取 和 插入 新 记录 的 方法 。 要 求 根据 提供 的 数据 表 和 程序 ,编写 JSP 程序 ， 
将 该 班级 的 所 有 “计算 机 基础 "的 总 评 成 绩 生成 XML 文件 ,运行 结果 如 图 14-4 所 示 。 


^. NySQL Command Line Client 


图 14-3 ”数据 表 computerTable 的 结构 和 数据 


程序 清单 14-3 


//ScoreBean. java 

public class ScoreBean ( 
String studentId; 
String studentName; 


int studentScore; 


public String getStudentId() { 
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XG) BED SEO HRW TRO wow 区 3 
O7- © BAG|\= i" @ SEO 


HE Q0 [B http: /Mocathest:€080/chepterI4/scoreliist jsp 3! | Google||G- 3 
mor TD — n 


<?xml vers encoding 


- < 成 绩 列表 > 
< 课程 > 计算 机 基础 </ 识 程 > 
< 成 绩 记录 > 


< 班级 >2007 角 化 学 专业 </ 三 级 > 
< 学 号 >200708023</ 学 号 > 
< 姓名 > 程 朗 </ 姓 名 > 
< 成 绩 >92</ 戌 绩 > 


</ 威 绩 记 录 > 


200708025</#5> 

< 姓名 > 李 四 </ 姓 名 > 

< 成 缚 >76</ 成 绩 > 

mi 

- “成 绩 记 录 > 
< 学 号 >200708026</ 学 号 > 

< 姓名 > 伍 柳 </ 姓名 > 

< 成 绩 >87</ 成 绩 > 

</ 成 绩 记录 > 

- ER> 

<P} > 200708027 </ #3 > 

cte» 

< 成 绩 >90</ 成 绩 > m 


Bs o OoOO G OUOU 
图 14-4 JavaBean 生成 XML 文件 


// 获 取 学 号 
return studentId; 


public void setStudentId (String studentId) ( 
// 设 置 学 号 
this.studentId= studentId; 


public String getStudentName() ( 
// 获 取 姓 名 
return studentName; 


public void setStudentName (String studentName) ( 
// 设 置 姓名 
this.studentName- studentName; 
} 
public int getStudentScore() { 
// 获 取 成 绩 


return studentScore; 


public void setStudentScore (int studentScore) { 
// 设 置 姓名 
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this.studentScore- studentScore; 
} 
} 


程序 清单 14-4: 


//ScoreHandleBean.java 

import java.sql.* ; 

import java.util. * ; 

public class ScoreHandleBean ( 


public ScoreBean[] getAllRecords () throws SQLException( 
ScoreBean record; 
Collection list-new ArrayList (); 
try{ 
Class.forName ("com.mysql .jdbc .Driver") .newInstance|(); 
Connection con- java.sql .DriverManager .getConnection ( 
"jdbc :mysql : / /1ocalhost/StudentDB? useUnicode- true&"+ 
"characterEncoding- GB2312", "root", "123456") ; 
Statement stmt=con.createStatement () ; 
ResultSet rs= stmt.executeQuery ("select * from computerTable") ; 


while (rs.next ()) { 

record- new ScoreBean () ; 
record.setStudentId (rs.getString(1)); 
record. setStudentName (rs.getString (2) ); 
record. setStudentScore (rs.getInt (3)) ; 
list .add (record) ; 
// 将 记录 依次 插入 到 列表 中 ; 

) 


stmt.close(); 
con.close(); 
}catch (Exception e) { 
e.printStackTrace () 7 


} 
ScoreBean[] records- (ScoreBean[]) list .toArray (new ScoreBean [0]) 7 


// 将 列表 中 所 有 的 元 素 转换 成 数组 中 的 元 素 


return records; 


14.3 实验 14.2 JSP 解析 XML 


实验 目的 : 


CD 进一步 了 解 XML 的 树 状 结构 。 
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(2) 熟练 掌握 和 运用 JAXP API 来 解决 实际 问题 。 

(3) 了 解 DOM 解析 XML 的 原理 和 具体 解析 的 过 程 。 

(4) 了 解 SAX 2.0 解析 XML 的 原理 和 具体 解析 的 过 程 。 

(5) 比较 DOM 和 SAX 2.0 解析 XML 数据 的 异同 ,归纳 二 者 的 特点 。 


实验 内 容 : 
为 某 班 设计 一 个 学 生 管理 简易 系统 ,要 求实 现 学 生 记 录 的 插入 、 删 除 、 修 改 以 及 对 学 生 
信息 的 查询 浏览 。 所 有 的 学 生 记 录用 XML 文件 保存 ,XML 文件 的 验证 见 student. xsd。 


请 分 别 用 DOM API fl SAX 2.0 API 来 实现 同样 的 功能 。 并 比较 二 者 进行 解析 XML 数据 
的 特点 。 


实验 步骤 : 


练习 1: JSP 用 DOM API 解析 XML. 

本 练习 的 目的 是 了 解 JSP 应 用 DOM 来 解析 XML 数据 。 本 次 练习 是 用 DOM API 来 
实现 一 个 某 班 级 学 生 基本 情况 简易 管理 系统 ,可 以 添加 、 删 除 、 修 改 和 浏览 已 知 保存 学 生 记 
录 。 已 知 保存 学 生 记 录 的 KML 文件 是 student. xml, 该 文件 的 结构 如 student. xsd, 代 码 见 
程序 清单 14-5。 要 求 如 下 。 

程序 清单 14-5: 


<?xml version="1.0" encoding- "UTF- 8"?> 
<!--student.xsd- -> 
<xs:schema xmlns:xs- "http://www.w3.0org/2001/XMLSchema"> 
<xs:element name="studentlist"> 
<xs:complexType> 
«xs:sequence» 
<xs:element ref- "student" maxOccurs- "unbounded"/> 
« /xs:sequence» 
< /xs:complexType> 
</xs:element> 
<xs:element name="student"> 
<xs:complexType> 
«xs:sequence» 
<xs:element ref="id"/> 
<!-- 学 号 --> 


«xs:element ref- "name"/> 


<!-- 姓 名 --> 
«xs:element ref- "gender"/> 
<!-- 性 别 --> 


«xs:element ref- "birthday"/» 
<!-- 出 生日 期 --> 
<xs:element ref- "email"/» 

<!-- 电 子 邮 件 --> 
<xs:element ref- "address"/» 
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<!-- 通 信 地 址 --> 


<xs:element ref- "phone"/> 


«1'--Hiik--» 
<xs:element ref= "mobile- phone"/» 
«1-—FHüu--» 


< /xs: sequence» 
</xs:complexType> 
</xs:element> 


<xs:element name= "phone"> 
<!-- 电 话 , (区 号 4 位 -号 码 8 位 )--> 
<xs:simpleType> 
«xs:restriction base="xs:string"> 
«xs:pattern value=" [0- 9] (4) (- [0- 9] {8})"/> 
« /xs:restriction» 
« /xs:simpleType» 
€ /xs: element» 
<xs:element name= "name"? 
<!-- 电 话 , 类 型 为 字符 串 --> 
<xs:simpleType> 
<xs:restriction base- "xs:string"/» 
< /xs:simpleType» 


< /xs:element» 


<xs:element name= "mobile- phone"? 
<!-- 手 机 ,数字 字符 串 , 长 度 为 7 至 11 之 间 --> 
<xs:simpleType> 
«xs:restriction base="xs:string"> 
«xs:pattern value-"[0- 9]+"/> 
«xs:minLength value- "7"/> 
«xs:maxLength value- "11"/» 
« /xs:restriction» 
« /xs:simpleType» 
< /xs:element» 


«xs:element name- "id"> 
<!-- 学 号 ,字符 串 --> 
<xs:simpleType> 
<xs:restriction base="xs:string"/> 
< /xs:simpleType» 


« /xs: element» 


<xs:element name= "gender"» 
<!-- 性 别 ,只 能 取 男 或 女 --> 
<xs:simpleType> 
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«xs:restriction base- "xs:string"» 
«xs:pattern value=" 女 | 男 "/> 
« /xs:restriction» 
< /xs:simpleType» 
< /xs: element» 


<xs:element name- "email"? 
<!-- 电 子 邮件 ,形式 xxx@ xxx.xxx.xxx- -> 
<xs:simpleType> 
<xs:restriction base="xs:string"> 
«xs:pattern value-"[^8 ]+@ [*\.]+\..4+"/> 
« /xs:restriction» 
< /xs:simpleType» 
< /xs: element» 


<xs:element name- "birthday" 
<!-- 出 生日 期 ,日 期 型 --> 
<xs:simpleType> 
<xs:restriction base="xs:date"/> 


< /xs:simpleType> 
</xs:element> 


<xs:element name="address"> 
<!-- 通 信 地 址 --> 
<xs:simpleType> 
<xs:restriction base="xs:string" /> 


< /xs:simpleType> 
« /xs:element» 

< /xs:schema» 

(1) 已 知 StudentBean. java( 代 码 见 程序 清单 14-6) Al StudentXML Bean. java( 代 码 见 
程序 清单 14-7) 是 JavaBean 程序 。 其 中 , StudentBean. java 是 记录 一 个 学 生 的 信息 ,而 
StudentXMLBean. java 实现 对 student. xml 文件 的 解析 和 相关 人 处理, 实现 对 student. xml 
插入 记录 ,删除 记录 、 修 改 记录 和 查询 浏览 记录 。 请 仔细 阅读 程序 清单 14-6 和 程序 清 
单 14-7, 将 程序 清单 14-7 的 StudentXMLBean. java 中 的 [代码 1 ~ 代码 6 处 补充 完整 。 


程序 清单 14-6: 


//StudentBean.java 
package student; 


public class StudentBean ( 
private String id; 
private String name; 
private String gender; 
private String birthday; 
+ 269 + 


private String address; 
private String email; 
private String phone; 


private String mobilePhone; 


public String getId() { 
/ AK WU 


return id; 


public void setId(String id) { 
// 设 置 编号 
this.id-id; 


public String getName() ( 
// 获 取 姓 名 


return name; 


public void setName (String name) ( 
// 设 置 姓名 


this.name- name; 


public String getGender() ( 
// 获 取 性 别 


return gender; 


public void setGender (String gender) ( 
// 设 置 性 别 
this.gender- gender; 


public String getBirthday() { 
// 获 取出 生日 期 
return birthday; 


public void setBirthday (String birthday) ( 
// 设 置 出 生日 期 
this.birthday-birthday; 
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public String getAddress () { 
// 获 取 地 址 


return address; 


public void setAddress (String address) { 
// 设 置地 址 
this.address- address; 


public String getEmail() { 
// 获 取 e-mail 


return email; 


public void setEmail (String email) { 
// 设 置 e-mail 


this.email-email; 


public String getPhone() ( 
// 获 取 电 话 号 码 


return phone; 


public void setPhone (String phone) { 
// 设 置 电话 号 码 
this.phone- phone; 


public String getMobilePhone() ( 
// 获 取 手 机 号 码 


return mobilePhone; 


public void setMobilePhone (String mobilePhone) { 
// 设 置 手机 号 码 
this.mobilePhone=mobilePhone; 
} 
} 


程序 清单 14-7: 


//StudentXMLBean.java 
package student; 
import org.w3c.dom. * ; 
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import javax.xml.parsers.* ; 

import javax.xml.transform. * ; 

import javax.xml.transform.dom. * ; 
import javax.xml.transform.stream. * ; 
import javax.xml.xpath. * ; 

import java.io. * ; 


public class StudentXMLBean ( 
DocumentBuilderFactory factory; 
DocumentBuilder builder; 
Document document; 
Element root; 
String filename- "student.xml"; 
public StudentXMLBean () ( 
// 默 认 构 造 方法 
tryt 
factory- 40% 1| ; 
// 创 建文 件 制造 工厂 对 象 
builder- factory.newDocumentBuilder (); 
// 创 建文 件 制造 器 


File file-new File (filename); 


document- builder.| [Ri 2| ; 

// 创 建文 档 对 象 

root- document .getDocumentElement () ; 
}catch (Exception e) { 


e.printStackTrace () ; 


public void saveXML () { 
// 将 发 生变 化 WL 数据 保存 在 XML 3c (prp 
tryt 


TransformerFactory transFactory=| {ti 3| 
// 创 建 转换 工厂 对 象 


Transformer transformer- transFactory.newTransformer () ; 


DOMSource source- new DOMSource (document) ; 


StreamResult result=new StreamResult (new File (filename) ) ; 


transformer.| FG 4| ; 


// 实 现 转换 
}catch (Exception e) { 


e.printStackTrace|(); 
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public void insertAElement (Element student, String tagName, String content) { 


// 插 入 一 个 元 素 ; 


Node element= document .createElement (tagName); 


element .setTextContent (content); 
student.appendChild (element); 


public void setAElement (Element element, String tagName, String content) { 
// 设 置 指定 元 素 element 中 , tagName 子 元 素 的 值 为 content; 
element.getElementsByTagName (tagName) .item (0) .setTextContent (content) ; 


public String getAElementValue (Element element,String tagName)( 
// 获 取 指 定 元 素 element 中 ,tagName 子 元 素 的 值 
return element.getElementsByTagName (tagName) .item(0) .getTextContent () ; 


public Element selectNode (String id,Object source) { 


// 选 择 指定 编号 为 id 的 结 点 


Element result-null; 


XPathFactory xpathFactory- XPathFactory.newInstance () ; 


XPath xpath- xpathFactory.newXPath () ; 
try { 


result- (Element)xpath.evaluate ("| 


代码 5 


// 检 索 指 定 id 编号 的 所 有 元 素 

) catch (XPathExpressionException e) { 
e.printStackTrace () ; 

} 

return result; 


public NodeList selectNodes (Object source) 


{ 


// 选 择 studentlist/student 元 素 的 所 有 结 点 


NodeList result-null; 


",Source, XPathConstants.NODE); 


XPathFactory xpathFactory- XPathFactory.newInstance (); 


XPath xpath- xpathFactory.newxPath () ; 
try { 


result= (NodeList) xpath.evaluate ("/studentlist/student", source, 


XPathConstants .NODESET) ; 
) catch (XPathExpressionException e) { 
System.out.printiln (e.getMessage ()) 7 
e.printStackTrace () ; 
) 


return result; 
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public void insertARecord (StudentBean record) { 


// 将 record 的 信息 插入 文件 中 
Element student; 
student= document . createElement ("student"); 


insertAElement (student, "id", record.getId()); 

insertAElement (student, "name", record.getName () ) ; 

insertAElement (student, "gender", record.getGender () ) ; 
insertAElement (student, "birthday", record.getBirthday ()) 7 
insertAElement (student, "address", record.getAddress ()) ; 
insertAElement (student, "email", record.getEmail ()) ; 
insertAElement (student, "phone", record.getPhone () ) 7 
insertAElement (student, "mobi le- phone", record.getMobi lePhone () ) 7 


root .| FRI 6|; 


// 插 入 新 元 素 到 根 元 素 中 
SaveXML () 7 


public boolean deleteARecord (String id) { 


// 删 除 学 号 为 id 的 记录 ,如 果 删 除 成 功 返 回 真 , 否 则 返回 假 
Element element- selectNode (id, root); 
tryt 
element.getParentNode () . removeChi 1d (element) ; 
saveXML () 7 
}catch (Exception e) { 
return false; 
} 
return true; 


public boolean updateARecord (String id,StudentBean record) { 


// 修 改 学 号 为 id 的 记录 ,如 果 修 改 成 功 返 回 真 ,否则 返回 假 
Element element= selectNode (id, root); 
tryt 
setAElement (element, "id", record.getId()); 
setAElement (element, "name", record.getName () ) ; 
setAElement (element, "gender", record.getGender () ) ; 
setAElement (element, "birthday", record.getBirthday () ) ; 
setAElement (element, "email", record.getEmail ()); 
setAElement (element, "address", record.getAddress () ) 7 
setAElement (element, "phone", record.getPhone () ) 7 
setAElement (element, "mobile- phone", record.getMobilePhone () ); 
}catch (Exception e) { 


return false; 
} 
SaveXML () ; 


return true; 


public StudentBean queryARecord (String id) { 
// 查 询 学 号 为 id 的 记录 ,如 果 查 询 成 功 返 回 保存 查询 信息 的 记录 
Element element- selectNode (id, root) ; 
StudentBean record- new StudentBean () 7 
record.setId (getAElementValue (element, "id")); 
record.setName (getAElementValue (element, "name")) ; 
record.setGender (getAElementValue (element, "gender")); 
record.setBirthday (getAElementValue (element, "bi rthday")); 
record.setkmail (getAElementValue (element, "email")); 
record.setAddress (getAElementValue (element, "address")); 
record.setPhone (getAElementValue (element, "phone")) ; 
record.setMobilePhone (getAElementValue (element, "mobile- phone")) ; 


return record; 


public StudentBean[] getAllRecords () { 
// 获 取 student .xml 文件 中 的 所 有 记录 
NodeList list- selectNodes (root); 
int length=list.getLength (); 
if(length<1) return null; 
StudentBean[] result=new StudentBean [length] ; 
for (int i=0;i<list.getLength ();i++) { 
result [i]=new StudentBean () ; 
Node node= list .item(i) .getFirstChild(); 
while (node! =nul1) { 
if (node.getNodeType ()==Node -ELEMENT_NODE) { 
if (node. getNodeName () .equals ("id") ) { 
result [i] .setId (node.getTextContent () ) ; 
} 
else if (node.getNodeName () .equals ("name") ) { 
result [i] .setName (node.getTextContent () ) 7 
} 
else if (node.getNodeName () .equals ("gender") ) { 
result [i] .setGender (node.getTextContent () ) 7 
} 
else if (node.getNodeName () .equals ("birthday") ) { 
result [i] .setBirthday (node.getTextContent () ) 7 
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else if (node.getNodeName () .equals ("email"))( 
result [i] .setEmail (node.getTextContent () ) 7 
} 
else if (node.getNodeName () .equals ("address") ) { 
result [i] .setAddress (node.getTextContent () ) ; 
} 
else if (node.getNodeName () .equals ("phone") ) { 
result [i] .setPhone (node.getTextContent () ) ; 
) 
else if (node.getNodeName () .equals ("mobi 1e- phone") ) ( 


result [i] .setMobilePhone (node.getTextContent () ) ; 


) 
y 
node=node.getNextSibling ();// 获 取 下 一 个 兄弟 结 点 ; 
)//end while 
)//end for 


return result; 


) 

(2) 编写 相关 的 JSP 文件 ,利用 上 述 JavaBean 组 件 , 设 计 并 实现 学 生 基 本 信息 简易 管 
理 系统 的 页 面 ,并 实现 对 学 生 记录 的 插入 \ 删 除 、 修 改 以 及 查询 浏览 记录 的 具体 操作 。 该 系 
统 的 首页 类 似 图 14-5。 
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练习 2: JSP 应 用 SAX 2.0. 

本 练习 的 目的 是 了 解 JSP 应 用 SAX 2.0 解析 XML 数据 。 本 次 练习 是 用 SAX 2.0 
API 来 实现 一 个 某 班级 学 生 基 本 情况 简易 管理 系统 ,可 以 实现 浏览 已 知 保存 学 生 记录 。 

3: JSP 应 用 DOM4J 解析 XML. 

是 一 个 扩展 练习 。 具 体 要 求 是 从 网 站 http://www. dom4j. org 下 载 DOM4J API 以 
pl 了 解 和 学 习 使 用 DOM4J API 并 利用 DOM4J API 实现 练习 14.1 中 所 有 的 
功能 。 

4: JSP 应 用 JDOM 解析 XML. 

是 一 个 扩展 练习 。 具 体 要 求 是 从 网 站 http://www. jdom. org 下 载 JDOM API 以 及 
Ea 了 解 和 学 习 使 用 JDOM 并 利用 JDOM 实现 练习 14. 1 中 所 有 的 功能 。 

思考 ; 以 上 4 种 解析 XML 的 方式 的 特点 各 是 什么 ? 


14.4 实验 14.3 JSP 自 定义 标签 


实验 目的 : 


(1) 进一步 了 解 JSP 应 用 XML. 
(2) 了 解 JSP 自 定 义 标签 的 原理 。 
(3) 了 解 ISP 使 用 自 定义 标签 的 过 程 。 


实验 内 容 : 


本 次 实验 由 两 个 练习 构成 。 

(OD 自 定 义 一 个 hello 标签 ,该 标签 value 属性 取 值 为 字符 串 。 该 标签 的 作用 是 输出 
“value 取 值 ,欢迎 学 习 Web 开发 技术 实用 教程 ?字符 串 。 

(2) 将 第 12 章 的 实验 12. 2 的 简易 论坛 重新 用 JSP 十 JavaBean 十 Servlet 十 XML 重新 开 
发 。 要 求 在 JSP 页 面 中 全 部 使 用 标签 ,不 允许 使 用 Java 代码 。 


实验 步骤 : 
5&2] 1; BEM hello 标签 。 
已 知 hello. jsp, 具 体 代 码 见 程序 清单 14-8。 该 ISP 页 面 使 用 了 自 定义 标签 hello, 来 实 
uu com inf n EA 14-6。 具 体 要 求 如 下 。 
序 清单 14-8 : 


<!--hello.jsp--> 
<% 6 page contentType- "text/html; charset=gb2312" language- "java"$ > 
«$6 taglib uri- "/WEB- INF/HelloTagLib.tld" prefix="m"% > 
«html xmins- "http: //www.w3.org/1999/xhtm1"> 
«head» 
«meta http- equiv- "Content- Type" content= "text/html; charset- gb2312" /> 
<title> 使 用 自 定 义 标签 < /title> 
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< /head» 


<body> 

<p> 

带 属 性 的 标签 输出 : <br/> 

<h3><m:hello value- "江山 " /></h3><br/> 
不 带 属 性 的 标签 输出 : <br/> 

«h3»«m:hello /></h3> 

«/p» 

</body> 

</html> 


3 使 用 自 定义 标签 - 了 icrosoft Internet Explorer 
Xf dB SEW hea TAD WR D 


Qs-O did» vom 03 m-O 


Hii QD [d] netp: //Locathost:6080/chapter14/student/hell a] EJ 983. Google. [C M A 
ne mE WEES FF 


带 属 性 的 标签 输出 ， 


江山 ， 学 习 《Web 开 发 技术 实用 教程 》. 


不 带 属 性 的 标签 输出 : 
游客 ， 学 习 《wWeb 开 发 技术 实用 教程 》. 


图 14-6 hello. jsp 的 运行 结果 


(1) HelloTag. java 是 一 个 处 理 实现 输出 字符 串 的 hello 标签 的 处 理 类 ,代码 见 程序 清 
单 14-9。 请 将 程序 清单 14-9 中 | 代码 了 和 | 代码 2 处 补充 完整 。 
程序 清单 14-9 : 


//HelloTag.java 

package tags; 

import java.io. * ; 

import javax.servlet.jsp.tagext.* ; 
import javax.servlet.jsp. * ; 


public class HelloTag extends TagSupport { 
private String value; 
// 设 置 标签 属性 value 
public int doStartTag() throws JspException( 
tryt 
if(value--null)( 


setValue ("游客 "); 


代码 了 println (getValue ()+", 学 习 《Web 开 发 技术 实用 教程 》."); 


p 


// 输 出 字符 
}catch (Exception e) { 


throw new JspException (e.getMessage ()) ; 


} 
return | 代码 2|; 
// 返 回 忽略 标签 主体 


public void setValue (String value)( 
// 设 置 属性 value 


this.value- value; 


public String getValue () { 
// 获 取 属 性 value 


return this.value; 


) 


(2) 下 列 程序 清单 14-10 是 创建 标签 库 的 描述 文件 HelloTagLib. tld, 请 将 程序 清单 14-10 


中 | 代码 引 和 | 代码 4 处 补充 完整 ,实现 对 hello 标签 前 


对 应 web 应 用 的 WEB-INF 目录 下 。 
程序 清单 14-10: 


<?xml version="1.0" encoding- "gb2312"?> 


<!--HelloTagLib.tld- -> 

<taglib> 
«tlib- version>1.0< /tlib- version» 
« jsp- version» 1.2< /jsp- version» 
< shortname» hello< /shortname> 


<uri>| Ri 3|« /uri> 


<!-- 设 置 标签 库 的 唯一 访问 标识 符 --> 


<info> 自 定义 标签 hell< /info> 
<tag> 


<name> hello< /name> 


<tag-class>| 代 码 4| « /tag- class» 


<!-- 指 定 标签 的 处 理 类 HelloTag --» 
<body- content» empty< /body- content» 


<info> 输 出 字符 串 < /info> 
<attribute> 
<name> value< /name> 


« required» false< /required> 


«rtexprvalue» true< /rtexprvalue> 


< /attribute» 


的 定义 。 并 将 HelloTagLib. tld 保存 在 
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< /tag» 
< /taglib» 


(3) 请 编写 对 应 应 用 的 web. xml. YE web. xml 中 部 署 自 定义 标签 库 HelloTagLib. tld. 


运行 hello. jsp 页 面 可 以 实现 对 标签 hello 的 应 用 。 观 察 运 行 结果 。 
练习 2; JSP 十 XML 开发 一 个 论坛 。 


模仿 ForumLite 2. 1 的 结构 设计 一 个 具有 最 基本 功能 的 简易 论坛 。 此 系统 要 实现 允许 
用 户 浏览 论坛 ,发表 新 论点 ,也 可 以 浏览 并 回复 论坛 的 已 有 论点 。 论 坛 中 所 有 的 数据 信息 用 
XML 保存 。 要 求 自 定义 标签 ,实现 对 XML 数据 的 访问 、 修 改 、 插 入 、 删 除 等 功能 。 具 体 功 


能 要 求 : 


(1) 任何 用 户 可 以 直接 发 表 论 题 ,论题 包括 标题 .内容 、 发 表 者 的 电子 邮件 以 及 发 表 日 


期 ;如 果 有 用 户 对 该 论题 回复 ,要 求 能 显示 已 回复 论题 的 次 数 。 

(2) 任何 用 户 可 以 浏览 已 发 表 的 论题 ,并 可 以 针对 特定 的 论题 进行 
括 标题 ,内容 .回复 者 的 电子 邮件 以 及 回复 的 时 间 。 

(3) 要 求 所 有 论题 以 分 页 的 形式 显示 ,每 页 面 10 个 论题 。 

(4) 要 求 某 论 题 的 所 有 回复 也 以 分 页 显示 ,每 页 面 10 个 回复 。 


回复 。 回 复 信息 包 


思考 : 比较 JSP 十 XML 开发 论坛 与 JSP 十 MySQL 开发 论坛 的 异同 。 请 回答 结合 
JSP 十 XML 十 MySQL 开 发 论坛 ,XML 和 MySQL 的 各 起 什么 作用 效果 会 更 好 。 
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以 与 我 们 联系 , 我 们 将 向 使 用 本 教材 进行 教学 的 教师 免费 赠送 电子 教案 (素材 ), 希望 有 
助 于 教学 活动 的 开展 。 相 关 信 息 请 拨打 电话 010-62776969 或 发 送 电子 邮件 至 
jsjjc@tup.tsinghua.edu.cn 咨询 ， 也 可 以 到 清华 大 学 出 版 社 主页 (http://wwwtup.com.cn 或 
http:/Avww.tup.tsinghua.edu.cn) 上 查询 。 


